My latest reason for wanting to scoop IE7's eyes out with a sharpened spoon.
When we're developing for the web, adapting for Interet Explorer is an unavoidable pain that we have to deal with.
But it's rare to find a problem that rears its ugly head in Internet Explorer 7, but not its much maligned predecessor Internet Explorer 6. We're trained by experience to expect IE7 to know better, albeit only slightly.
However, I recently learnt that this isn't always the case; IE 7 throws its toys out the pram if you dare set a width on the on the main html element on a page like so:
<html><style type="text/css" media="screen">
html{width:700px;
margin: 0 auto;
background:#444;
}
body{width:650px;
margin: 0 auto;
background:#eee;
padding:18px;
}
#wrapper{width:550px;
margin: 0 auto;
background:#435434;
padding:18px;
}
</style><body>
<div id="wrapper">
Yammer yammer</div>
</body>
</html>
Do this, and you'll find your layout clings to the leftmost side of the browser window in IE7, for no good reason.
But look at it in IE6, Opera, Safari or Firefox, and you'll see a series of boxes in the centre of the screen, behaving properly.
It's really rather frustrating.
I've put also put this into a test page here, as a sanity check for myself, and also to see if IE8 displays the same asinine behaviour.
I can't get back the time it took to work out this bug, the best I can hope for that this post saves time for another developer.
Such is life.