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

Identifying copy and paste behavior within an HTML form using .NET CORE MVC 2.1

I inherited a project at my current company and one of the tasks involves allowing users to paste multiple ISBN numbers from Excel into a search field on my Index page (HTML). Sometimes, the ISBNs are poorly formatted with letters or special symbols mixed ...

htmlasp.net-core.net-coreasp.net-core-mvc

Struggle with typescript integration with emotion and styled components

Issue Description: I encountered an issue while working with typescript and emotion/styled libraries. When attempting to specify the type of the parent component that wraps a styled component, I faced difficulties. The scenario involves a parent componen ...

cssreactjstypescriptstyled-componentsemotion

What are the benefits of using Semantic mark-up and WAI-ARIA in a Tabbed Section?

Currently working on the structure of a website and aiming to improve accessibility skills. I'm curious about the most appropriate way to mark up tabbed content. Here's what I have so far: <section> <nav> <a href="#tab" aria ...

htmlaccessibilitywai-aria

How can I extract text from nested HTML elements with a <a href> tag using the Jericho library?

Here is a snippet of my HTML code: <div class="itm hasOverlay lastrow"> <a id="3:LE343SPABGLIANID" class="itm-link itm-drk trackingOnClick" title="League Sepatu Casual Geof S/L LO - Hitam/Biru" href="league-sepatu-casual-geof-sl-lo-hitambiru-6816 ...

javahtmlparsingjericho-html-parser

Generate a JSON array containing objects consisting of a combination of string and boolean values

My goal is to generate a list containing objects with names and boolean values by utilizing AJAX. This process is initiated in the following manner: $('.si-accordion').click(function () { $(this).siblings('.accordion_tab&apo ...

javascriptjqueryhtmlajax

What is the best way to add a directional hover effect to a filter?

I am attempting to implement a sliding hover filter effect on an image. The original filter I have is set to grayscale(1). What I want to achieve is for the filter to transition directionally instead of having a slider overlay effect, in order to change i ...

csshovercss-filters

Unable to display a Google map within a webview when viewing a local HTML file

I am currently working with a local HTML file called basicmap.html that includes the following code: <!DOCTYPE html> <html> <head> </head> <body> <div id="map"></div> <script> ...

javascripthtmliosobjective-cgoogle-maps-api-3

Javascript code has been implemented to save changes and address resizing problems

Code Snippet: <script> function showMe(){ document.querySelector('#change').style.display = ''; document.querySelector('#keep').style.display = 'none' document.querySelector('#change1').style.d ...

javascripthtmlcss

Accessing and displaying a randomly selected PDF file from a directory using HTML coding

Welcome to my recipe collection website where I document all the delicious recipes I love to eat. One feature I would like to add is a 'random' button, so that a recipe will be selected at random for me without having to make a decision. Althou ...

htmlfilepdfrandomrandomaccessfile

Requesting data asynchronously using AJAX and displaying the filtered results on a webpage using JSON

When I send a request to my node.js server for a .json file containing person information (first name, last name), I want the data to be filtered based on user input. For example: When I request the .json file from the server, it gives me a list of people ...

javascripthtmljsonnode.js

Strategies for avoiding a hover component from causing distortion to its parent component in React

I am encountering an issue with a hover component that is causing distortion in its parent component when displayed. Essentially, I need to prevent the hover component from affecting the layout of its container. Below is the code snippet: Styling for Lang ...

javascriptcssreactjscomponents

Updating a Specific Database Entry in Django Using Multiple Field Values

Hey there, I'm still learning the ropes and haven't had much time to really dive into it yet. My end goal is to create a "check-in/check-out" system by updating a timestamp from NULL to the current time based on employee number and work area. He ...

pythonhtmldjango

Expanding the rowspan within a table column has the effect of reducing its overall width

I have created a table with two rows, where the first row has three columns and the second row has two columns. The middle column in the first row has been set to rowspan="2". However, the issue is that it appears smaller than its intended width. .kolon ...

htmlcss

Discover how to access and manipulate JSON files in an Angular application using

Currently, I am diving into learning TypeScript with Angular and I'm interested in reading a JSON file. The structure of my JSON file is as follows: { "nb": "7", "extport": "1176",, "REQ_EMAIL": ...

htmljsonangulartypescript

I am struggling to style a form effectively with CSS grid

I am working on setting up a 2-column HTML form using CSS grid. In the first column, I have labels placed on individual rows. In the second column, I have form elements also placed on individual rows. This is my initial attempt at this task and I am sti ...

htmlcssformsgrid

The parent and child elements both attempted to define the background color, but neither was successful in applying it

Here is the html code snippet: body { font-family: Arial, Helvetica, sans-serif; } header { background-color: rgb(93, 43, 78); background-image: -webkit-linear-gradient(right, rgb(93, 43, 78 ...

htmlcssbackground-imagebackground-color

When you scroll a fixed element on the page, the block is truncated

I made a modification for adding cart items and included a script for managing my cart The cart is supposed to stick to the right edge and scroll up and down on the page Everything seems to work, but there's a slight issue when I click on Add 1 and ...

javascripthtmljquerycss

My current scroll animations are problematic as they are causing horizontal scrolling beyond the edge of the screen

I've implemented scroll animations on various elements of a website I'm constructing. The CSS rules I'm utilizing are as follows: .hiddenLeft { opacity: 0; filter: blur(5px); transform: translateX(-090%); transition: all 1s; ...

javascripthtmlcss

Is there a way to utilize jQuery to determine the distance the user has scrolled down?

Looking for some help with changing the style of an element based on scroll position using jQuery. Specifically, I want to add a class name to a div once the user has scrolled beyond 200 pixels and then remove the class name when they scroll back up to l ...

jquerycss

What is the best approach to modifying the color of a menu item in the sidebar upon clicking it using Material-UI in a React application?

I am a beginner with this framework and my goal is to change the color when clicking on a Menu Item in the Sidebar. For example, clicking on the table component should change the table name and icon to white color. Could someone please help me figure out h ...

javascripthtmlcssreactjsmaterial-ui