Things n' Stuff Thoughts about the universe in general

[Update: initially I thought this problem was limited to IE7 and earlier, I was wrong and it also happens in Internet Explorer 8. Kind of destroys what ever expectations I’ve had remaining for IE8]

Although Internet Explorer 8 was already released¹ most users are going to stick to previous versions – I know this for a fact as even though Internet Explorer 7 is already more than a couple of years on the market it still only has slightly better then 50% of the Internet Explorer market (not including other browsers).

That being said, its always “fun” finding more Internet Explorer bugs, something which the web developer I’m working with is proficient in (which she isn’t really doing on purpose – I’m not sure if it counts in her favor or not 🙂 ), so here is the latest one she stumbled upon²:

Apparently, with Internet Explorer 8 and earlier –  if a container has an image floated in it and some other element which is set to have a negative margin-top (to make the element appear higher in the rendering then it originally was), then if the container has a background – and only if the container that holds both floated image and margin-skewed element has a non-transparent background – then the image is clipped to the start of the element with the negative margin – if you have IE, see here for the test case otherwise, here is a screenshot showing the problem:

All elements have a floated image and the third line has a negative margin (also floated to the right so it is easy to read – this has no effect on the bug). The first box has no background (transparent background) and does not exhibit the bug; The second box shows what happens when a background is applied – the image is clipped; The last box shows how to work around this bug: if the container (the red box) is forced to have a layout – in this case by giving it a CSS “zoom” property – then the bug does not exhibit itself.

The main problem with this bug (or atleast the problem we had with it) is that if the element with the negative margin is above the image, the image entirely disappears. In our case this was only exhibiting itself in the “mouseover” action which gave the element a background (while normally it was transparent) so when you moused over an element in IE the image would disappear and reappear when you moused out – and it was a bitch to triage :-/ .

Although this problem appears in all Internet Explorer versions, including 8, I still hope is that when Windows 7 will come along (with IE8 as default), it will be so good that people will upgrade in droves and all prior versions of Internet Explorer will become extinct – as a lot of other bugs that are IE7 only will go the way of the Dodo. Unfortunately, in addition to this being in conflict with my wish for global Linux domination ( 😉 ), this doesn’t seem likely to happen.

1. and it boasts a superior rendering engine – which is almost on par with  Firefox 3: it breaks horribly in the WordPress edit post dialog – its the first serious rendering problem I’ve seen with IE8 [↩]
2. I haven’t documented the several previous ones we encountered – I might do so in the future [↩]

This entry was posted on Monday, April 27th, 2009 at 13:03 and is filed under Articles, Software. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.