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.
3 responses
Comments feed for this article
What about setting position:relative and then using left:-20px?
Jonathan Snook December 17th, 2005
I think you told me earlier that each comment was a container div with two more inside, one for each column. Using floats really isn’t that tedious - at least as long as you get the div order correct and float the proper one.
eric December 18th, 2005
Jonathan: yes, that seems to work nicely. I’ll try and check it out in a few more browsers.
eric: my problems weren’t with the comments, but with some stuff on my archives page.
ionfish December 19th, 2005