(Yet Another) Microsoft Internet Explorer Rendering Bug

For years, standard operating procedure for developing a web application would be to design and implement it with Microsoft’s Internet Explorer as the test bed. You’d pick a version and tell everyone that they needed to use it and that was that. I have to admit that even I committed such sins.

These days, I want my pages to be usable on as wide a variety of web browsers as possible, so I use Mozilla Firefox for development, and then just check MSIE at the end to see if anything is amiss. Yet, with MSIE, something is almost always amiss…

I’ve had trouble with good-looking logos and mastheads for a long time. Back in the day, tables were the way to go. More recently, CSS is the preferred (and really the only) way to do layouts. The trouble is that MSIE has some schizophrenia when it comes to CSS. The folks that wrote MSIE implement only part of the CSS specifications, and often took shortcuts whenever they wanted.

A few days ago, I noticed that MSIE was acting strangely when viewing one of my current projects. It appeared that the text in my masthead wasn’t being displayed. Perhaps I had some conflicting CSS styles that were giving my text the same background and foreground colors. I checked, and everything was okay. Reload after reload, application server restart after application server restart didn’t solve the problem. Mozilla Firefox never blinked an eye and rendered the (quite simple) page without a problem.

Then, I noticed that scrolling the page past the fold and back again would mysteriously reveal the text. That’s not something that can be done using CSS.

Check out this movie that demonstrates the problem:

Screenshot of MSIE Rendering Bug

It’s definitely a bug. The markup is validated correct strict XHTML 1.0 and the CSS is also spick-and-span clean.

The markup is fairly straightforward; there’s a div surrounding the entire masthead (both the topmost blue bar and the bar containing the tri-colored regions), and then a divcontaining everything within the topmost blue bar. The blue bar contains a form containing the login form. All the other text elements are plain-old h1 and h2 h2elements. The tri-colored regions live in their own divand are made up of the surrounding div(black background) and two nested divelements with appropriate background colors.

The styles are also straightforward; colors, margins, borders, etc. I didn’t even have to use the ‘line-height’ trick to get MSIE to display an empty div(for the tri-colored regions).

It turns out that the problem can be solved by adding a simple non-breaking space between the blue-bar and tri-colored-bar divelements. MSIE interprets this change by finally giving me what I wanted in the first place. Unfortunately, it adds a small vertical space before the tri-colored-bar which I would prefer not to have… it looks like unnecessary padding in the blue div.

I have a virtual machine running Microsoft Windows XP with MSIE 7 beta running on it, so I decided to comfort myself with the fact that MSIE 7 had probably fixed this bug. It hasn’t, at least not yet. I hope the MSIE engineers really try to get CSS right this time.

Comments are closed.