There are a couple of major reasons why HTML will display radically different in different email clients. The first would be that the HTML was designed to use HTML features that are not universally implemented. The second is that the specific email client in question actually rewrites your HTML into a format it likes to work with. For example, if you use styles within your email, Hotmail will literally rewrite them into a format that ensures your style definitions don’t CONFLICT with theirs. Before they took this approach, it was quite easy to embed styles in your emails that would completely recolor Hotmail’s interface and font styling! Sacriligous!
If you are using an HTML editing tool, you should start by looking for a function that allows you to design for a specific ‘target browser’, such as IE 6.0 and older. If you set the target browser to either a standard HTML version, or a browser that is a couple fo generations old, you are more likely to get a consistent look. Of course if you’re generating dynamic pages with javascript, a tool is more likely to generate a completely different page for each browser version, and you may have to either scale back your features or just put up with the display differences.
Also remember that if a web page looks fine in all the browsers you care about, getting the page source in one browser may give you different HTML than you would get if you got the page source from another browser, depending on whether the web server is serving you a static HTML page, or generating a page specifically for the browser.
If you are manually authoring your HTML, or if your pages are just really simple, your problem may be ‘illegally’ constructed HTML. Unclosed tags, improperly nested tags, and text in illegal places are the most common issues I’ve seen.
Browsers will do thier best to display your HTML, but if it’s not legal HTML, the browser has to guess what you wanted. In some cases, it seems pretty clear:
<B>bold<i>bolditalic</B>italic</i>
This might display the way you want, but it breaks the rules of how to properly ‘nest’ tags, so different browsers may display it differently. (The legal coding would be <B>bold<i>bolditalic</i></B><i>italic</i> since tags can be nested, but not overlapping)
In order to make sense of your HTML, the browser will actually attempt to ‘fix” what you’ve done, inserting the missing close tags, and either insert missing tags around text in illegal places, moving text to the nearest legal place, or throwing it away entirely. The best way to keep different browsers from rewriting your HTML in different ways is obvious: make sure it’s correctly done, so that they don’t have to rewrite it in any significant way!
You can find nesting an improper tagging issues by using an HTML validator like the one the W3C provides at http://validator.w3.org/. The W3C validator is picky, and it will warn you about breaking guidelines that you may not care about, but it will also warn you about unclosed tags and tags appearing in places where they should not be.
One particular situation where even ‘legally’ constructed HTML can confuse a browser is inconsistent use of the <p> tag. A <p> tag can be a stand-alone tag or it can be an open and close tag. (the </p> is not required). If you are going to use a <p> tag in your HTML, you should either always include the </p> tag, or never include it. if you sometimes use the </p> tag, different browsers make different guesses about what you meant. Some will ignore the </p> tags that are there, while others will imply </p> tags when they would be needed if they were required. These approaches lead to radically different amounts of whitespace based on the same original code.
Looking for answers to programming questions? Post a comment and ask me, and I’ll do my best to answer them for you.
