CurSSing Fluently

During the development of the Two Worlds vServer and my subsequent iceclimb (with crampons and two axes) up the North Face of the CSS learning curve, I came across a bug in the Mac OS X version of Internet Explorer, up to and including 5.2.3. Nothing new there, except that appears to be unique to the Mac version and doesn’t appear to be desperately well documented (at least for this CSS newbie).

<a href="files/iebug.jpg” onclick=”‘files/iebug.jpg’,’popup’,’width=959,height=305,scrollbars=yes,resizable=yes,toolbar=no,directories=no,location=no,menubar=no,status=yes,left=0,top=0′);return false”><img src="files/iebug-tm.jpg” height=”100″ width=”314″ alt=”iebug” title=”Mac IE Bug” style=”imageblock” />

<a href="files/ieok.jpg” onclick=”‘files/ieok.jpg’,’popup’,’width=959,height=305,scrollbars=yes,resizable=yes,toolbar=no,directories=no,location=no,menubar=no,status=yes,left=0,top=0′);return false”><img src="files/ieok-tm.jpg” height=”100″ width=”314″ alt=”ieok” title=”Mac IE OK” style=”imageblock” />

The symptoms are that nested elements with relative positioning inherit the positioning offset of their parent, with the exception of the first element in the nesting. The following two screenshots show what should be happening, and what does happen. The effect is also cumulative, in whatever units you’ve chosen, so if you’ve got an outer container offset by (e.g.) 5% and the next by 200px, the next-but-one (!) and subsequent containers will be offset by 5%+200px. The page and the CSS will validate as strict XHTML and the site will work in every other browser combination I’ve tried. The workaround turns out to be very simple indeed: change the “left: ” property to “margin-left: ”. Works for me, and doesn’t appear to change the rendering in any other browser I’ve tried. Many thanks to Codebitch and Tara Star, whose sites put me on the track of the fix, once I’d worked out the cause sufficient to formulate a sensible Google search. And thanks to both Apple and the open source community for producing browsers that actually work, on one or more platforms – step up for a bow please, Safari, Mozilla, Firefox, and Camino, alongside Netscape, Omniweb and Opera. If anyone’s foaming at the mouth about my ommission of Konqueror, then please accept my apologies – I simply haven’t gotten around to trying it yet. Now I’ve just got to address the Box Model Hack to get around the buggy handling of the CSS box model in WinIE…

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.