Annoying IE8 beta 2 CSS breakage

re: Annoying IE8 beta 2 CSS breakage

skeet — Sun, 07 Sep 2008 19:02:44 GMT

@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

re: Annoying IE8 beta 2 CSS breakage

skeet — Sun, 07 Sep 2008 16:59:59 GMT

@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

re: Annoying IE8 beta 2 CSS breakage

Frederik Vig — Sun, 07 Sep 2008 13:58:16 GMT

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

re: Annoying IE8 beta 2 CSS breakage

Marc Gravell — Sun, 07 Sep 2008 09:18:30 GMT

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

re: Annoying IE8 beta 2 CSS breakage

skeet — Sun, 07 Sep 2008 08:06:20 GMT

@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.

re: Annoying IE8 beta 2 CSS breakage

Peter — Sun, 07 Sep 2008 07:39:57 GMT

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?

re: Annoying IE8 beta 2 CSS breakage

skeet — Sun, 07 Sep 2008 06:33:08 GMT

Update: Just found www.positioniseverything.net/.../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 :)

re: Annoying IE8 beta 2 CSS breakage

skeet — Sun, 07 Sep 2008 06:27:42 GMT

@Perry: Thanks, hadn't tried that. Having added "<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />" 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!

re: Annoying IE8 beta 2 CSS breakage

Perry — Sun, 07 Sep 2008 05:58:56 GMT

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!