CODEWITHSUNDEEP
htmlcssemail
user1477955
user1477955

Reputation: 1670

HTML - in Firefox tables are displayed aligned left

I created a responsive HTML-newsletter. All images are wrapped in a table. On a small display I want the tables to be upon eachother. On wider displays tables shall be displayed in a row. It works fine in Chrome but not in Firefox. Below I pasted the whole HTML, I wanted to create a fiddle, but in a fiddle it works fine, very confusing.

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>

Upvotes: 1

Views: 115

Answers (2)

Daan
Daan

Reputation: 2799

I think this is because of the use of -webkit- vendor prefixes. You should always add the real CSS code under it, without vendor prefix.

For instance you have: -webkit-text-size-adjust:none !important;

which is only for Webkit browsers (Chrome, Safari)

You should have written:

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

-moz- is for Mozilla firefox, etc.

For more information about Vendor Prefixed properties:

Click here for more information about Vendor Prefixes

Upvotes: 1

Rares Hideg
Rares Hideg

Reputation: 394

try this :

table table table{ clear: both; }

edit : in your @media only screen and (max-width: 620px)

Upvotes: 2

Related Questions