Managing background colors in Hotmail on Firefox
[Editor’s Note: This post was amended based on feedback that our fix didn’t work in Chrome/Webkit. We found a new fix, which is what is reflected below in the discussion section. Keep that feedback coming!]
Our rendering experts have observed some changes with the treatment of color backgrounds within the new Windows Live Hotmail when viewed in Firefox.
We’ve known for some time that setting a page background color using the body tag is a no-go; it gets ignored or stripped in a wide swath of webmail clients. The solution was instead to wrap the whole email within one 100% width table, and set that table’s background to the desired color. Problem solved.
Now, however, this no longer works in Hotmail on Firefox. The problem seems to be that regardless of an email’s declared 100% table width, the Hotmail-Firefox combination collapses the email width to the widest hard-coded width of the email document; for example the widest image, body text table, etc. Thus any attempts to design an email with a colored background are thwarted, and the results can look pretty disastrous.
But rest assured we’ve found a solution, and it’s very quick and easy. Simply include the below in-line style within your 100%-width table and no more disappearing background!
< style=”table-layout:fixed” >
You can design your email just as you did before and simply add this style to your existing table. Here’s a simple example to reference:
< table width=”100%” bgcolor=”[your color]” border=”0″ style=”table-layout:fixed” >
< tr >
< td >[your email]< /td >
< /tr >
< /table >
Have you come across any other kooky rendering problems that you need help with? Leave a comment below and we’ll do our best to come up with a fix.