IE breaks html/css in gmail/hotmail.etc

Forum Moderators: open

Message Too Old, No Replies

IE breaks html/css in gmail/hotmail.etc

AMDdude

1:11 am on Jan 28, 2010 (gmt 0)

Trying to solve why IE breaks text formatting in e-mail clients. Ex:

IE browser everything is fine. IE in gmail, alignment is broken.

Now this only happens in IE, and it happens to all templates, mine and others I tried..

Any clue why this is happening?

Thanks.

[edited by: tedster at 1:47 am (utc) on Jan. 28, 2010]
[edit reason] sorry, no links or screen captures [/edit]

tedster

1:56 am on Jan 28, 2010 (gmt 0)

Welcome to the forums, AMDude.

Styles and online email clients are a tough mix - always have been. Here's a thread from 2005 that goes into the fine points. Yes, that's a while ago, but the situation hasn't evolved all that much in five years. Post #5 by Don Hoagie is one of the great gems I've ever seen about mail client variations.

The Challenges of HTML Email [webmasterworld.com]

AMDdude

2:40 am on Jan 28, 2010 (gmt 0)

Thanks, I just figured it out. I was using <center></center> on the entire page, apparently in e-mails in IE this tag propagates to every element.. weird!

tedster

3:37 am on Jan 28, 2010 (gmt 0)

Sounds right - it's good that you found the issue.

It's better to break the <center> tag habit, anyway. Even though <center> still has browser support for backwards compatibility, as far back as 2002 it was included in the deprecated HTML tags [webmasterworld.com].

AMDdude

3:58 am on Jan 28, 2010 (gmt 0)

What would you suggest if I still wanted to center my page?

Thanks.

tedster

4:42 am on Jan 28, 2010 (gmt 0)

There are a number of approaches using CSS - not sure about how compatible they are with online email clients. Here a solid cross-browser approach that works on web pages, and I converted it to all inline CSS because that's better for HTML email.

<body style="margin:0;padding:0;text-align:center;">
<div style="margin:0 auto;width:400px;text-align:left;">
Your email page goes here
</div>
</body>
}

You can of course change "width" to however many pixels works for your message - but definitely test it first.