Email HTML tricks, including collapsing tables in Firefox Hotmail

[tweetmeme source= “getintheinbox” only_single=false]
Not the first people I would have expected to solve an html rendering problem but nice action anyway:
In Managing background colors in Hotmail on Firefox (5/8/2010) Return Path spotted a problem with the background wrapping table not holding it’s 100% width in Hotmail through Firefox. It turns out that by adding
table-layout:fixed
into the table’s style attribute, it’s all sorted! You should probably add this attribute to every table.

This is not the first time widths have had rendering problems, most commonly seen with table and images.

Most clients don’t like it when you state the metric type, ie: px, in a direct width attribute, eg:
<td width=”20px”>

So basically you have to just drop off the px. However, if you put in a style attribute, eg:
<td style=”width:20px;” >
It’s fine.

The same rule applies, but far less consistently, for percentages as we have seen from Return Path.

We also have the famous gaps between split images. You may be using a table or just whacking them together and when you look at the email test there appears to be a 1px gap between adjacent images.
To fix this simply add this to the style attribute of every image:
display:block;
Easy! you should add this attribute to every image

Some email clients and browsers still show you the alternative text when the image are blocked. Sometimes they can be big times new roman and not really fit or be readable. By adding a style attribute and styling the font sizes and family etc. you can make the alt text match your email design.

As you know many inboxes will now grab the top two lines of your html content and stick it next to or under the subject line. Subsequently most peoples snippet text is their trust earning text in the preheader which is dominated by the view in a browser link. Not really something that’ll sell the open from the inbox.
If you want to keep your preheader the same but manipulate the snippet text, stick a small transparent gif at the top and make the alt text your snippet text. Try it!

MS Outlook 2010 has the ability to open your email in IE without you having to make a special link. Tis was found by Litmus in Outlook 2010 Beta (25/03/2010):
you can either add:
#ForceOutlook2010BrowserLink span { padding: 0px; }
within a style tag at the top (Outlook does not strip that out like most other clients)
OR add
<span style=”padding: 0px;”></span>
at the bottom.
Have a play with it – as it will only show in Outlook 2010 and won’t affect any other client, you may as well always add it. People tend to trust Outlook more than you.

In the past I’ve been of the opinion that the reason why Outlook has always been such a bad rendering client and not keeping up the standards, is because they are making a point of their influence and control they have.
But I’ve kind of come around a bit. Microsoft adding this into Outlook 2010 is an admission that they know the rendering is pony, they were unable to do anything about it on this release but do want to make it better in future releases.