At the time of my last redesign, I noticed something odd going on with Internet Explorer. On one page, several elements seemed to have simply disappeared. A brief rummage through the code revealed that the offending elements had both set widths and negative margins.

Unfortunately for IE visitors, things got very hectic for me not long after, and I didn’t have the time to fix it—using negative margins was an easy way to add a bit more flexibility to the layout without having to use lots of tedious floats and structural markup, so any alteration would involve a fair bit of change to both the HTML and the stylesheet.

Still, the thought percolated away for a while. Eventually, I realised that it must be to do with IE’s incorrect interpretation of the box model (Tantek’s is the clearest explication of the box model and IE’s problems with it out there).

I’ve created a test page demonstrating two problems that Internet Explorer has; there may well be more. Firstly, an element with a negative margin equal or greater in size than its size in that dimension (width or height) will simply disapper. Secondly, if you use a negative margin to take part of an element outside a parent element with a fixed width, that outside part will be guillotined off; it simply won’t show up.

So far this has been tested for me by helpful people with various versions of Firefox, Opera and Safari, all of which display the test correctly, and Internet Explorer for Windows, which does not. Internet Explorer for Mac apparently displays the test correctly, so as we knew already, Tantek and his team did a far better job on IE/Mac than the IE/Windows team has managed to date.

If you’ve noticed this before, written it up as a problem somewhere, or have any data or analysis that might shed any further light on this problem, please post in the comments. I’m sure the work I’ve done here isn’t at all original, but anything that spreads the word and lets people know things they need to avoid if they’re unfortunate enough (like me, and most frontend developers) to have to carry on supporting Internet Explorer.

Here’s that link to that test page again.