IE Double Margin Bug

OK, I’ve just seen it plague too many designs and WordPress themes to ignore it anymore. I was completely oblivious to it when I started developing themes, and if you look at some of them, you’ll be able to tell it.

It’s … the dreaded IE Double Margin Bug!!!

The Problem

I’ll break it down … basically, on any floated item (for me, that would be the 3 main sections of a site, Content, Left sidebar, Right sidebar), no matter what margin you give the div, IE6 (maybe 7?) doubles that number. So if you have a left sidebar, floated left, along with a middle content section, also floated left, and finally a right sidebar, again … floated left, and you give them each a left and right margin of 10 pixels, IE will make it 20 pixels instead.

This comes as a HUGE problem when you have a fixed width layout, because too much margin on your floated columns will break your layout, causing a sidebar to fall down below the other columns.

A Solution

One of the easiest solutions for this problem is to declare the “display” property on the floated div as “inline”. For whatever reason, this fixes the problem. I personally like to display my divs as “block” though, so I don’t use this solution.

Another Solution

One other solution would be to use conditional tags and alternate stylesheets for IE, then divide the margin by 2 and declare it in the alternate stylesheet. I include a stylesheet for IE7 and IE6 on each of my themes … just in case. But again, I try not to use this method. For one thing, if your margin is an odd number (say 19px), there’s no way to cut that in half for IE.

My Favorite Solution

Yes, I know it has drawbacks, but for me it’s the most natural way to fix the problem. Instead of using margin, I use padding to make sure there is space between the elements.

I know, I know, what if you have 3 columns that need whitespace between a darker background (or vice versa)? Since I use background images to achieve faux columns, this isn’t an issue for me. I give the appearance of margin using the background image, but in reality it’s all padding baby!

OK, I’m glad I got that off my chest. Now, please go fix your themes!!!

Comments