The ridiculous double margin bug that affects Internet Explorer finally has a cure. For those that haven’t seen it before, the gist is that sometimes an element that has a margin: and a float: property applied to it, instantly doubles the size of the margin value that matches the float – in other words, an element with a 10px left margin that also floats left, would mysteriously end up with a 20px left margin instead.
Anyway, Steve Clason seems to have found the solution to this and documented it at Position Is Everything. Fortunately, it’s simple indeed – you set the element to have a display: property of inline and subsequently setting float: left; implicitly changes the element back into a block element again.
Which then stops the margin from doubling in size. Somehow.
Well… not quite IE 7, but the next best thing for now. Dean Edwards has put together some neat-o scripting using IE’s behaviour functionality to implement heaps of CSS 2 properties (attribute selectors, child and sibling selectors) and then some more.
The only downside seems to be the odd issue such as this one raised by Adrian Holovaty about the file size and location of the file (so as to help users get it from one central source, and thus have that cached for re-use later).
On the positive though, there’s hope for the old crock of a browser yet. Even better, Dean says there’s more to come.
It’s probably well documented elsewhere, but another CSS failing in Internet Explorer came up for me today. IE5.5 (and I presume, earlier) fail to properly respect the media attribute within a style tag. For example, in the following code IE5.x will import both stylesheets for screen rendering:
<style type="text/css" media="print">
@import url("print.css");
</style>
<style type="text/css" media="screen">
@import url("screen.css");
</style>
Why would this be an issue? If you’ve created a print stylesheet that – for example – hides part of the UI for clarity, you’ll find that the browser will apply both stylesheet rules and hide the UI on the on-screen version too. Which isn’t so good.
The solution though is easy enough – using part of the CSS2 spec that IE5.x again fails to implement correctly. Within the print specific style sheet, you need to encapsulate the styles with the @media rule, like so:
@media print {
...style declarations...
}
This fixes the problems with IE5.x as it ignores the @media rule and the declarations within. Yay.
This is starting to become an IE bug database, isn’t it? Today’s latest Microsoft “quirk” is the appearance of the so-called “double-margin” bug (details on Big John’s “Bughouse” page). The basic idea is that items with a margin: set to any value that then also have a float: property set to left, instantly gain a margin that is double their original size.
The only obvious way around it to create an IE-specific rule that applies a margin that’s half the size you want it to be – which will then double up to be the size that it was intended once the float: property is applied.
(For a method of creating such a rule, see my earlier post that references the star html bug. Unfortunately the bug affects IE6 as well, so the rather more elegant mid-pass filter won’t apply here.)
