IE7: CSS still broken

I’ve got a WinXP partition on my laptop that I have to keep to use SonicStage. Oh, how I hate SonicStage, and Sony for forcing me to use it…but that’s a different topic.

Anyhow, I’ve hued and cried about Internet Explorer’s shoddy rendering of CSS before. Now that version 7 is out, I figured I’d give it a run and see if the codemonkeys at Microsoft had gotten things right. I mean, it’s only been ten years since the CSS standards have been introduced, right? You’d think they could have gotten it fixed by now.

Guess again.

If you’re using Firefox (like you should be), the default theme for this site should have a nice fixed header with the content flowing smoothly underneath when you scroll. Pretty, ain’t it? It’s actually quite simple, and it just uses compliant and well-documented code (the “position: fixed;” attribute). Since it’s standard CSS2, it should render the same on any browser, right?

Heh.

Okay. Explorer is clearly confused. The padding and margins are all wrong, and it still doesn’t understand percentage units of measurement. That means that all dimensions have to be specified in pixels, which means that scalable pages are out of the question.

Explorer also has an annoying habit of inserting an internal scrollbar, even though the dimensions are properly stated. And of course, the fixed elements are simply ignored.

Also, notice that IE still doesn’t “get” the PNG transparency in the logo. How 1997.

Okay, well I’ve got a non-scalable theme that I specifically designed for IE. How’s it do?

Go ahead and load this theme up in Firefox. Notice the huge gap that Explorer adds between the header and the body. I have no idea where that comes from. There should only be one line between the content and the sidebar. So where does the other one come from?

I checked the stylesheet I wrote, and sure enough it’s in there, but commented out. Apparently, IE renders everything in the stylesheet, whether or not it’s supposed to. Lovely.

…and if anyone can tell me what the heck is going on here, be my guest:

Yeah, I’m also tagging this as “humor,” because the only sane reaction to something like this is laughter.

Incidentally, several themes use an effect on the banner logo that fades it to transparency on hover. The code is actually part of the CSS3 spec, and is not supported by many browsers.

The actual syntax is:

#header a:hover {
filter:alpha(opacity=75);
opacity: 0.75;
-moz-opacity:0.75;
}

…which works well enough in Gecko-based browsers. Opera simply blanks out the image on hover, while Konqueror (KHTML) quietly ignores the code.