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.

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.

Essential reading.

<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.

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.)

There is, however, an interesting hack that attempts to make up for this deficiency that’s been put together by Kalsey Consulting that in itself makes use of the quirky star HTML bug present in IE.

Overall, it’s a useful technique to get around one of IE’s many bugs, quirks and oddities, but not one I’ll be pulling out for everyday use just yet.

At first, I was almost convinced it was my graphics drivers, or some odd Windows quirk. However, it’s a known issue and fortunately the link above documents it and a good workaround. I chose to use the setting of the line-height attribute to 100% on the parent element which cured it straight off, without affecting the flow of the content itself.

In his own words:

“…the Mid Pass Filter is a filter which passes external style sheets to version 5.x Internet Explorer for Windows browsers, but not to earlier/older browsers, nor to newer / more modern browsers.”

This is, of course, a more elaborate but not necessarily more elegant way of implementing the changes required for IE5 horrendously broken box model which traditionally involves the use of one of Tantek’s original workarounds – the original box model hack.

Personally, going to the extreme of creating an entirely new stylesheet for one browser may be a relatively clean way of doing things, but it’s certainly much more tiresome from a developers’ point of view. The most common issue with IE5′s faulty CSS support is its’ warped view of the box model in relation to its padding and width attributes which can be cheerfully overridden with with the original hack above or one of its derivatives.

In fact, my own current methodology is to create content and style that works in what we know to be standards compliant browsers – for example, those using the Gecko or Konqueror renderers – as a basis for my work. Once that is more or less in good working order, I can then go back and check the layout in IE5.x and add in any hacks as required.

Nevertheless, it’s always good to see innovation in this field.