Annoying IE8 beta 2 CSS breakage
Okay, firstly let me make it very clear that I know very little about CSS. The nuances of layout in CSS fill me with fear, particularly in terms of trying to get all browsers to behave sensibly.
Until recently, I thought that the C# in Depth web site was reasonably sensibly behaved. It's a simple layout: header at the top, menu on the left, content on the right. Okay, so it would be nice if the menu (which has a different background colour) could always fill the whole viewport on the left hand side, preferrably staying static as well, but that's apparently tricky. I'm fine with something which works but isn't quite as nice as I'd like it to be.
However, it seems we have problems in the land of Internet Explorer. IE6 doesn't render the menu at all, but puts the content several hundred pixels to the right. That's bad, and I've no idea why it's happening, but I can probably live with it, at least for the moment. IE7 is okay - which made me confident that IE8 would be okay. Not so - beta 2 is causing different oddities.
I've set up a page which is pretty minimal but shows the issue. It doesn't have the header, just a block on the left and a block on the right. It works fine in Chrome, Firefox and IE7. Below are some screenshots of what it looks like under various conditions. I haven't separated Firefox, IE7 and Chrome as they're all very similar. Not identical, but close enough. In each case I've captured enough of the screen to include the sides of the window, and all the coloured content.
Firefox, Chrome, IE7
Chrome at a normal size, with no wrapping of the text:
Chrome with a narrow window, forcing wrapping:
IE6
Initially, IE6 doesn't show all the content, and none of the left menu.
After making the window wide enough to show all the content on one line (despite odd positioning) the left menu suddenly appears.
Making the window narrow again doesn't remove the left menu. Weird.
IE8b2
IE8b2 looks okay to start with...
... but when the content doesn't fit on one line, it displays very oddly. This is the case for all the pages on the C# in Depth site.
Page Source
Below is the complete source for the page. It's not exactly complicated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Breakage in IE8b2</title>
<style type="text/css">
div.leftmenu
{
position: absolute;
left: 0;
width: 15em;
background-color: #00dddd;
}
div.content
{
background-color: #dd00dd;
padding-left: 1em;
padding-right: 1em;
padding-top: 1em;
margin-left: 15em;
float: left;
}
</style>
</head>
<body>
<div class="leftmenu">
<p>
Menu
</p>
<p>
Link
</p>
<p>
Link
</p>
</div>
<div class="content">
<p>Main content div</p>
<p>
In IE8b2, if you don't have enough space to get this text on one line, odd stuff happens.
</p>
</div>
</body>
</html>
Questions
So, am I being dumb? Should this really behave so weirdly on both IE6 and IE8b2? Is it pure coincidence that IE7, Chrome and Firefox (2 and 3, btw) all make the page look how I want it to look?
As I said, I'm really not a CSS guy. I wouldn't be surprised to find some fundamental flaws in what I'm doing. I'd just like to know how to fix them. And yes, I'll be asking on a CSS newsgroup when I get the time, probably with a link to this post. Any thoughts welcome.