The Hotmail / Firefox Line Break Issue Is Resolved
Have you ever come across the consistent issue of line breaks in your email design in Hotmail using Firefox?
One consistent annoyance I’ve always encountered has been testing an email in Hotmail with Firefox. For some reason, this combination of client and browser generates horizontal line breaks in emails. I never knew why… until now.
After some digging, Smith-Harmon has discovered that a simple bit of code is the purest remedy for this issue. At the top of the email (before the opening TABLE tag), make sure you include this:
<style>img {display: block;}</style>
It’s that simple. You can also accomplish the same effect if you code each image individually with the “display: block” property / value. For example:
<img src="images/header.jpg" style="display: block;" />
Kudos to Smith-Harmon for this useful shred of knowledge!
Posted by Bryan Quilty on Mar. 02, 2010
Comments
Ali,
I’ve done the same! I’ve added it to my HTML template / reference for all of the emails I code.
I always thought the issue was for Hotmail to address, but I’m glad an email marketer figured out how to fix the problem.
Posted by Bryan Quilty on 03/03/2010 09:57 AM
A little more information on the background of this issue can be found over on the Mozilla site. The cause of the this issue essentially comes down to the way Hotmail + Firefox interprets the DOCTYPE. The below link has a great explanation:
https://developer.mozilla.org/en/images,_tables,_and_mysterious_gaps
Our team did a write-up on this issue about a year ago:
http://blog.exacttarget.com/blog/web-based-bulk-email/0/0/design-tip-of-the-week-making-sure-hotmail-and-firefox-get-along-v1
Just goes to show how important cross-platform and browser testing can be, even with web-based email clients.
Happy email coding!
Posted by Justine Jordan on 03/03/2010 12:14 PM
Adding margin:0 to your image style should also help with some MobileMe issues and issues in some obscure webmail clients. We’ve been adding this to all img styles for a few years:
#
Posted by Justin Reid on 03/03/2010 12:56 PM
Thanks Bryan,
I’ve used this property for several months now, but didn’t know about the one-for-all top style tag. This new info is very useful.
You probably know this already, but here it is anyway:
In the beginning, after implementing the display:block property, I had problems aligning the image horizontally. The usual align=“center” attribute in the <td> tag just didn’t work. I later learned I had to implement it in the <img> tag.
Thanks again.
Posted by Casper Floor Andersen on 03/03/2010 05:10 PM
I found out about this maybe 6 months ago and literally screamed in my cube with joy. I have a piece of paper on the wall still up right this minute with a giant “STYLE=DISPLAY:BLOCK” - people ask, and I try to tell them the importance of it, but they will never truly understand the relief that code gave,...
Posted by Ali on 03/03/2010 09:22 AM