As detailed over on my work blog, I installed IE8 RC1 this morning. Because my home page in IE7 was this blog (it is in all my browsers), it was the first thing to come up in IE8. And IE8 immediately flipped into compatibility mode and displayed the page as if it was IE7. To put it mildly, this was both weird and aggravating, since the whole site validates both as XHTML 1.0 transitional and as CSS 2.1. There should have been no problem.
Given that the only advice you see (or can find online) on making a web page display without compatibility issues is to make it validate, I had a problem. At first I thought it was a JavaScript issue (IE is notorious for doing things differently than any other browser) and so I turned it all off, but that didn't help. So, it was something in the HTML or the CSS that was giving IE8 fits. As I described over on the ctodx blog, IE8 has a Developer Tools dialog that you can use to help you debug web pages.
First thing was to turn off all CSS. The page displayed in all its unstyled glory. The problem then was with the CSS somewhere. Again, puzzling, since it validated.
The CSS tab allows you to turn styles off and on, or even to change their values. It was the work of a couple of minutes to find out that the float:left style on the #wrapper DIV was the issue. Turn it off, and the page displayed fine. Turn it on, and I got a white screen. Mmm.
The other thing that was displaying wrong was the code snippets. This was a little weirder, but it seems that if I have overflow:scroll on the PRE tag, IE8 would display the PRE section at the maximum height. It didn't matter whether I set the height style to auto or not, the max-height ruled them all. If I have overflow:auto, no sweat. Fine, so that's what I changed it to.
At that point, the web site displayed fine in IE8. I checked to make sure that Chrome, Safari and Firefox were OK with the changes and published the new CSS.
So, if you are going through a similar exercise with IE8, my advice is first to make sure your HTML and CSS validate. Don't do anything else until you have at least that. Once you've got to – and crossed – that first hurdle, try displaying your page in IE8. It, quote, should just work, unquote. But, as I've shown here, there could be other issues with the way that IE8 responds to your validating HTML or CSS that will require further investigation using the Developer Tools dialog. Good luck!
I'll report back once I've found why IE8 didn't like a valid float style on my wrapper DIV. Smells like a bug.
Now playing:
Roxy Music - The Thrill Of It All
(from Country Life)
Loading links to posts on similar topics...
3 Responses
#1 Tommi Prami said...
19-Feb-09 2:50 AMOFFTOPIC: Are you sure that you just don't watch the "Roxy Music" :D (Sorry, just had to...)
#2 Dew Drop - February 19, 2009 | Alvin Ashcraft's Morning Dew said...
19-Feb-09 7:01 AMPingback from Dew Drop - February 19, 2009 | Alvin Ashcraft's Morning Dew
#3 julian m bucknall said...
19-Feb-09 2:44 PMTommi: Ha! I'm old enough to remember when the album first came out. The US banned the cover, so Bryan Ferry arranged it so the cover for the US was just the background of leaves you see behind the girls.
Cheers, Julian
Leave a response
Note: some MarkDown is allowed, but HTML is not. Expand to show what's available.
_emphasis_**strong**[text](url)`IEnumerable`* an item1. an item> Now is the time...Preview of response