Margin Discrepancy between IE and the Othersâ„¢

You may have noticed in your web design process that element spacing isn’t the same between Internet Explorer and the Gecko engine-powered browsers (Netscape, Mozilla, Firefox, etc). It’s been the cause of so many wrongly positioned elements during my page design process. At first, I could never figure out why Firefox was working fine, but Internet Explorer just really wanted to push a sidebar below the rest of the page content. I knew it had something to do with the margins and the elements encroaching on each other’s territory; however, it wasn’t until a couple weeks ago that I (think) really discovered the cause.

It would seem as though Internet Explorer’s measurement for margin spacing is not equivalent to the Gecko engine’s interpretation. Internet Explorer tends to space things out quite a bit more than the Gecko engine. As a result, if you’ve just got enough room to fit in ‘20px’ of margin in Firefox, you’ll probably find that it messes up in Internet Explorer. That’s not so good. If you want those margins to look right in Internet Explorer, you’ll probably end up with a little funky looking thing in Firefox and the rest of the browsers out there. To get around this little, but annoying problem, I’ve been using a pretty hacky fix.

Padding spacing seems to be measured the same by Internet Explorer as the other browsers. As a result, lining things up for me has been requiring another element (say a div layer) that has as its padding attribute what the inner element would’ve needed as a margin. By avoiding those margins, you can be pretty much assured that things will line up properly in all the browsers. (Okay, I lied, I haven’t tested this in Safari, but if anyone would like to send me a Mac, I’ll gladly look into it. 😉 ) So the only inconvenience is really that everything will be nested one div deeper. That’s not too bad.

If anyone can point out what I’m doing wrong to solve this ‘problem’ without doing what I’m doing, feel free to drop me a line. I’d really appreciate it if there’s an easier way of getting around it.

6 thoughts on “Margin Discrepancy between IE and the Othersâ„¢”

  1. Or just add an IE conditional to the header and set the margins correctly in there.

    e.g.

    <!–[if IE 6]>
    <style type=”text/css”>
    #sidebar { margin-left:10px; }
    </style>
    <[endif]–>

  2. Hmmm… thanks for the tip. The only thing would be that it could get pretty cumbersome if there are a lot of objects that require differing margins. Will definitely keep this in mind for the future though. I honestly didn’t even know you could do conditional CSS. 😳

Leave a Reply

Your email address will not be published. Required fields are marked *