Obscure HTML Email CSS Quirk in IE7

A couple of customers contacted us with some mysterious HTML email problems we'd never seen before. The tables in their emails were somehow blowing out (way out) when viewed in IE7 (which would happen if they were checking their email account at Yahoo, Gmail, Hotmail, etc).

Let's say you've placed some inline-CSS on a table cell. You want to give the cell a top border of 1 pixel, and the border should have a HEX color value of #333333 (very dark gray). Your code would look something like:

style="border-top: 1px solid #333333;"

Now let's say you accidentally forgot the pound (#) symbol in that HEX value.

In most browsers, it's a gimme. Nothing bad happens.

But somehow, IE7 thinks the color value is your border width, and gives you a top border of 333333px (actually, it's more like 960 pixels, but you get the gist). It's just coming up with some very large number from that 333333. If you used "333" instead, the border would be exactly 333 pixels. If you enter 33, it's 33 pixels. 333333 for some reason makes it 960 pixels.

Here are a couple sample files you can open in IE7 to see what we mean:

With the # symbol in CSS

Without the # symbol in CSS

If this post didn't put you to sleep, you might also like:

HTML Email Tips for Web Designers

and more free email design and coding resources in the

MailChimp Email Marketing Resource Center