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.

 
   
Safari vs Firefox vs IE7: HTML Tables notes?

thumbslinger

Newbie
Total Posts:  11
Posted: 24 August 2010 07:55 AM

Hello all-
How about sharing any tips and insights on the rendering of HTML tables in these three browsers?

I try to include height and width in all cells and on all images as well as no height in the table tag. Even so, I’m running into Safari being perfect, FF jutting two cells in different rows and IE7 doing the same as FF but moreso.

Any other insights into the behind-the-scenes rendering of tables in these browsers?


 

acidadmin

Avatar
Administrator
Total Posts:  43
Posted: 01 September 2010 09:15 AM
[ # 1 ]

Heya thumbslinger,

You are correct, support for width and height attributes within tables, TDs, and TRs vary from one browser to the next.

In fact we have come to avoid the height attribute entirely because it is unpredictable.  Instead, I recommend using the old method of creating a transparent GIF in order to force the width or height of each TD.  For example:

<table>
  <
tr>
   <
td width="300">
     (
content)
     <
img src="clear.gif" width="300" height="1">
   </
td>
   <
td width="100">
     (
content)
     <
img src="clear.gif" width="100" height="1">
   </
td>
  </
tr>
</
table

When using this method, just BE AWARE: Outlook 07 and 2010 ignore the width and height attributes within the image element, so you can’t just stretch the clear GIF to whatever width/height you want, you actually need to use a clear GIF with exact dimensions for each instance.

I sincerely hope this helps!