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.
Jon Skeet's coding blog 
BUT, if you click the new “Compatibility View” button to the right of the address text box it “fixes” the issues and everything looks hunky-dory!
LikeLike
@Perry: Thanks, hadn’t tried that. Having added “” to the master page, C# in Depth is now rendering properly. Thanks so much!
However, I don’t like using hacks like this. I want to be properly standards-compliant, and I *thought* that the CSS was already following standards. I’d still be very grateful to anyone who knows how to fix the CSS itself to work on IE8 and IE6 without breaking the others!
LikeLike
Update: Just found http://www.positioniseverything.net/explorer/doubled-margin.html and added “display: inline” to the floated style. It shouldn’t do anything, but it fixes IE6 without breaking anything else. Hooray!
So, it would be nice to get an IE8 fix just through CSS, but at least the site should work for everyone now :)
LikeLike
Not that removing the “position: float” seems to fix the problem anyway, but it’s not clear to me why you’re using that anyway. The “position: absolute” div gets taken out of the layout flow anyway. What is it about “position: float” for the content div that’s useful for the page in this case?
LikeLike
@Peter: Good question. Frankly, I can’t remember. This is the kind of thing I don’t like about CSS – you experiment until something works, but unless you really keep track of all the problems which occurred when you *don’t* have it all “just right” it’s hard to give reasons later.
Basically, I find CSS layout hard to reason about in the way that I do with other languages.
I’ll try getting rid of the float completely and test it on all the different browsers. It would be nice to be able to get rid of the hacks.
LikeLike
Re “Compatibility View” (Perry) – last time I checked, even this didn’t work fully on all sites. I seem to recall Google Maps going completely freaky in either mode, for example (Google may have fixed this since then… who knows)
Gotta say, though – I’m lovin’ Chrome ;-p
Marc
LikeLike
Hi
You seem to have closed your title tag twice, but that could just be a type error. When it comes to the CSS issue, have you tried floating instead of using absolute positiong?
div.leftmenu
{
float: left;
width: 15em;
background-color: #00dddd;
}
div.content
{
background-color: #dd00dd;
padding-left: 1em;
padding-right: 1em;
padding-top: 1em;
float: left;
}
Hope it helps.
Frederik
LikeLike
@Frederik: Thanks for spotting the title tag issue. Fixed now on the page. (I’m leaving it up in its broken state as a demonstration of the oddness.)
I haven’t tried floating both of them – seems a little bit odd, but worth a try, along with trying to remove the float entirely as Peter suggested. Thanks!
Jon
LikeLike
@Frederik: Floating both leftmenu and content doesn’t work for the C# in Depth site: the content ends up beneath the menu.
@Peter: Removing the float entirely works fine on all my test browsers, even without the IE8 compatibility hack. Hooray!
Jon
LikeLike