In the Firefox browser, tables are shown with left alignment

I recently designed a responsive HTML newsletter with all images neatly wrapped in tables. My goal was to ensure that on smaller screens, the tables stack on top of each other for better readability, while on wider displays, they appear side by side in a row. This approach worked smoothly in Chrome but presented some issues in Firefox. To showcase the problem, I've included the entire HTML snippet below. I initially planned to create a fiddle for easier testing, but surprisingly, everything seemed fine there.

HTML

<html lang="en">
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>float image</title>
<style type="text/css">



  table {border-collapse: collapse;}
  td {font-family: arial, sans-serif; color: #333333;}

  @media only screen and (max-width: 620px) {
        body,table,td,p,a,li,blockquote {
          -webkit-text-size-adjust:none !important;
        }
        table {width: 100% !important;}

        td[class="scale_img"] img{

          height: auto !important;
          max-width: 400px !important;
          width: 100% !important;
        }
    }
  }
 </style>
</head>
<body style="margin:0; padding:10px 0;" bgcolor="#ededed" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#ebebeb" width="100%">
    <tbody>

        <tr>
            <td>
                <table border="0" cellpadding="0" cellspacing="0" align="center" width="600" bgcolor="#FFFFFF">         
                    <tbody>

                        <tr>
                            <td>
                                <table border="0" cellpadding="0" cellspacing="0" align="left" width="32%">
                                    <tbody>
                                        <tr>
                                            <td style="padding: 0 18px 0 18px;" align="center" class="scale_img">


                                                <img src="http://projector.buyingguide.com.au/images/225_on_16_9.jpg" width="160" alt="">

                                            </td>
                                        </tr>
                                        <tr>
                                            <td style="font-size: 0; line-height: 0;" height="20"> </td>
                                        </tr>

                                        <tr>
                                            <td style="font-size: 0; line-height: 0;" height="20"> </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <table border="0" cellpadding="0" cellspacing="0" align="left" width="32%">
                                    <tbody>
                                        <tr>
                                            <td style="padding: 0 18px 0 18px;" align="center" class="scale_img">

                                                <img src="http://projector.buyingguide.com.au/images/225_on_16_9.jpg" width="160" alt="">

                                            </td>
                                        </tr>
                                        <tr>
                                            <td style="font-size: 0; line-height: 0;" height="20"> </td>
                                        </tr>

                                        <tr>
                                            <td style="font-size: 0; line-height: 0;" height="20"> </td>
                                        </tr>
                                    </tbody>
                                </table>
                                <table border="0" cellpadding="0" cellspacing="0" align="left" width="32%">
                                    <tbody>
                                        <tr>
                                            <td style="padding: 0 18px 0 18px;" align="center" class="scale_img">

                                                <img src="http://projector.buyingguide.com.au/images/225_on_16_9.jpg" width="160" alt="">

                                            </td>
                                        </tr>
                                        <tr>
                                            <td style="font-size: 0; line-height: 0;" height="20"> </td>
                                        </tr>

                                        <tr>
                                            <td style="font-size: 0; line-height: 0;" height="20"> </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </td>
                        </tr>

                        <tr>
                            <td style="font-size: 0; line-height: 0;" height="20"> </td>
                        </tr>


                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

htmlcssemail

Answer №1

Give this a shot:

table table table{ clear: both; }

Quick tip: apply this in your @media query for screen sizes up to 620px wide

Answer №2

The reason for this issue could be attributed to the utilization of -webkit- vendor prefixes. It is recommended to include the actual CSS code without any vendor prefix.

For example, you currently have: 

-webkit-text-size-adjust:none !important;

This particular code is only effective on Webkit browsers such as Chrome and Safari.

A better approach would be:

-moz-text-size-adjust:none !important;
-webkit-text-size-adjust:none !important;
text-size-adjust:none !important;

The -moz- prefix is specifically for Mozilla Firefox, among others.

To delve deeper into Vendor Prefixed properties, check out this link:

Explore more information about Vendor Prefixes here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Click to position custom text on image

Is there a way to adjust the position of text on an image after it has been clicked? I have included an image below to demonstrate how I would like it to appear: https://i.stack.imgur.com/unmoD.png function revealContent(obj) { var hiddenText = obj. ...

htmlcssimageonclickclick

Dynamic row height in MUI DataGrid

I'm currently utilizing the MUI DataGrid component, and I have a specific behavior in mind that I'd like to achieve: When there is a small number of rows present, I want the table to only occupy the necessary space for those rows. On the other h ...

cssreactjsmaterial-uidatagrid

The menu field remains open even after clicking on the menu

I have encountered an issue with my code. Here is a DEMO that I created on jsfiddle.net Currently, when you click on the red div, the menu opens. However, if you click on the menu items, the menu area does not close. What do I need to do in order to clo ...

javascriptjquerycssajax

What is the best way to display and conceal elements depending on the chosen option using jQuery?

Can you help me figure out why this code isn't working as expected? <Script> $('#colorselector').change(function() { $('.colors').hide(); $('#' + $(this).val()).show(); }); </Script> < ...

jqueryhtmlhtml-select

@page Css not displaying properly on the Mozilla Firefox browser

In order to fulfill my requirement, I need to ensure that there is a consistent 10cm margin on all pages when printing. Printing on my web page involves utilizing the window.print() function. However, due to the dynamic nature of the content, the number o ...

cssasp.net-mvcprinting

Input field modified upon focus

I am currently using selectize js in my section to create a select box. My goal is to make the input editable after selecting an option when it is focused on. Check out the live demo: live demo HTML <label>Single selection <select id=" ...

javascripthtmljqueryselectize.js

Incomplete Website Encryption Alert

Currently, I am developing a website called "usborroe.com" and have just set up a GeoTrust Business ID SSL Certificate. However, despite my efforts to ensure full encryption on the site, an error message is indicating that it is not fully encrypted and t ...

phphtmlcsssslssl-certificate

What is the best way to center a div within another div without using the margin tag?

I am struggling to find a way to center a container (div) on my webpage. I've tried various methods like using margin:auto, margin:0 auto;, margin-left:auto;, and margin-right:auto;, but none of them seem to work. Additionally, I'm unsure about ...

asp.netcss

Elements in Motion

Working on a parallax effect, I've managed to assign unique scroll speeds to (almost) every element. Moreover, these elements are programmed not to activate their scroll speed until they enter the viewport. Below is the JavaScript code for trigger co ...

javascriptjqueryhtmlcssparallax

Create a function that triggers a fade-out effect on one button when another button is clicked

Hello everyone! I'm still getting the hang of things around here so please be kind. I need some assistance with my weather app project. Specifically, I've created two buttons and I want to make it so that when one is clicked, the other fades to g ...

javascriptjqueryhtmlcss

Displaying a preloaded image on the canvas

Once again, I find myself in unfamiliar territory but faced with the task of preloading images and then displaying them on the page once all elements (including xml files etc.) are loaded. The images and references are stored in an array for later retrie ...

javascripthtmlcanvas

What steps should I take to effectively configure the header cache on my website?

After navigating through various links and attempting different solutions such as adding <meta HTTP-EQUIV="EXPIRES" CONTENT="Thu, 31 Dec 2015 12:00:00 GMT"> to my header without success, I am struggling to find a comprehensive guide on how and wher ...

htmlcaching

Instructions for duplicating the current website address into another browser window or document without user input

I have a desire to create a button within a web browser that, when clicked, will either copy the current URL address into a file or open another web browser and paste it there. Being new to programming, I am unsure of which language to use for this task. ...

javahtml

Displaying the blog post title in the metadata information

Currently, I am facing a challenge with my Jekyll site's Search Engine Optimization because I am having difficulty setting meta information. ... <meta name="og:title" content="{{ seo_title }}" /> ... <!-- now in my for post-loop: --> {% f ...

htmlseojekyll

Avoiding Page Reloads with Ajax while Removing Entries from a Table in Laravel

I am encountering an issue where I can click the button, but it requires a refresh to execute the delete action. Is there something in my ajax code causing this problem and why is it refreshing? I want the button to instantly delete without the need for a ...

phphtmlajaxlaraveleloquent

Troubleshooting image overlay alignment concerns

My script successfully adds the image src to the overlay's image, but I encounter a problem when creating the variable imgH for the margin-top value. It calculates the image's height and divides it in half. The issue arises when the calculated h ...

jqueryhtmlcss

Avoid the resetting of chosen value following a POST or submission

I am currently working on creating a "web dashboard" that requires a year_from parameter from an HTML form. Despite setting up my Flask backend to return data within this specified range, I am encountering a problem where every time I hit submit, the selec ...

htmlajaxflask

Blurry text can be a common occurrence when applying the transform(-50%,-50%) function to center

I have found a way to center a section using the following code: <div class="clock-section"> <h5 id="clock-title">We will be arriving soon</h5> <hr class="hr" id="cdhr"> </div> Here is ...

htmlcsstransformblur

What is the process for manually looping an HTML5 video on iOS 4.3/5?

I'm facing an issue with a video that has specific segments I need to be looped. The problem arises on iOS 5, where after updating videoElem.currentTime for the third time, mobile Safari stops recognizing this attribute correctly. Interestingly, on i ...

iosipadhtmlvideo

Synchronize two slideshows in a cycle with timed delays between each cycle

Is there a way to add a sequential delay between slideshows in the synchronized slide show example from cycle2 API? For example, having each div.cycle-slideshow start at 5s intervals (5s, 10s, 15s, 20s...). The cycle would then repeat with the first div st ...

javascriptjqueryhtmlcssjquery-cycle2