Community Forum

Over the years we have built up a community of email marketers, coders and designers that live and breathe email.

Use the Email on Acid Forum like your virtual water cooler: Stop by to discuss email code, quirky clients and fixes and post your issues (with an example of the code) for our community to offer its assistance.

 
   
Gmail <td> cell height does not set correctly in firefox

ajcoder

Newbie
Total Posts:  13
Posted: 20 June 2012 01:59 PM

I created a normal table with three cells, the left and right cell have an image and the middle cell has a background color. The cell with the background color is not the same height in gmail in firefox as it is in other email clients and browsers. How do you fix this?

<table id="Table_01" width="700" border="0" cellpadding="0" cellspacing="0">
    <
tr>
        <
td colspan="3" id="heading" style="text-align:center; 
width:700px" 
width="700">
           
heading text            
        
</td>
    </
tr>
    
    
    <
tr>
        <
td height="45">
       
            <
table cellpadding="0" cellspacing="0" border="0" 
style="height:45px;">
                <
tr>
                      
        <
td width="308" style="width:308px" height="45px">
            <
div style="height:45px;"><img src="image.jpg" alt=""
 
width="308" height="45" align="top" style="border:0;" /></div></td>
        <
td height="45px" width="372" align="center" 
valign="middle" bgcolor="#8b8d08" id="bar" style="width:372px;">
            <
div style="height:45px; vertical-align:middle;"bar
 text 
</div></td>
        <
td style="width:20px"><div style="height:45px;">
            <
img src="original.jpg" width="20" height="45" alt="" /></div></td>
                </
tr>
            </
table>
        </
td>
    
    </
tr>
    <
tr>
        <
td colspan="3" valign="top" width="700px" style="width:700px">
                <
table cellpadding="30" cellspacing="0" border="0">
                        <
tr>
                  <
td valign="top" width="450px" style="width:450px" id="main">
         
main text

                                
</td>
                                
                                   <
td valign="top" width="250px" 
style="width:250px; border-left:#8b8d08 solid 2px" id="sidebar">
           
sidebar text
                                
</td>
                        </
tr>
                </
table>
        </
td>
    </
tr>
    <
tr>
        <
td colspan="3" id="footer" style="text-align:center; width:700px" width="700">
           
footer text            </td>
    </
tr>
</
table


This is the problem area.

<td height="45">
       
            <
table cellpadding="0" cellspacing="0" border="0" style="height:45px;">
                <
tr>
                      
        <
td width="308" style="width:308px" height="45px">
            <
div style="height:45px;"><img src="image.jpg" alt=""
 
width="308" height="45" align="top" style="border:0;" /></div></td>
        <
td height="45px" width="372" align="center" 
valign="middle" bgcolor="#8b8d08" id="bar" style="width:372px;">
            <
div style="height:45px; vertical-align:middle;"bar 
text 
</div></td>
        <
td style="width:20px"><div style="height:45px;">
            <
img src="original.jpg" width="20" height="45" alt=""
/></div></td>
                </
tr>
            </
table>
        </
td


I’ve tried creating divs in the table cells to make them a specific height, but gmail in firefox still ignores it. I think hotmail does too. Any fixes?


 

ajcoder

Newbie
Total Posts:  13
Posted: 20 June 2012 02:06 PM
[ # 1 ]

I JUST figured it out. I needed to put display block on both sides of the table cell.


 

<td width="308" style="width:308px" height="45px">
            <
img src="original.jpg" alt="" width="308" height="45" 
align="top"style="border:0; display:block" />[/color]</td>
        <
td height="45px" width="372" align="center" 
valign="middle" bgcolor="#8b8d08" id="bar" style="width:372px; 
vertical-align:middle;"
>
         
bar text</td>
        <
td style="width:20px">
            <
img src="original.jpg" width="20" height="45" 
alt=""style="border:0; display:block[/b][/color]" /></td

 

Michelle Klann

Avatar
Administrator
Total Posts:  204
Posted: 20 June 2012 03:01 PM
[ # 2 ]

Nice, thanks for sharing your fix! 

As a side note for anyone else searching on this topic, Gmail converts the “height” CSS property to “min-height” which can have varying results cross browser. 

Glad to hear that adding display:block helps!!

Miki


 

nirminator

Newbie
Total Posts:  1
Posted: 13 July 2012 03:47 PM
[ # 3 ]

You need to add a height attribute in the <td> like this <td height=”“> as opposed to a CSS height and Gmail will render this without any problems.