As I began sprucing up my Portfolio a little, I came across a nasty IE bug that I'm sure I'd read about before. I was disappointed to be able to find precious little about it on the web but one blog which explains it quite nicely.
Roll on Jason at izzywizzy.org:
I've been wrangling with what appears to be a strange bug in IE, both 5.5 and 6, in the display of background images. For reference, Mozilla Firebird, my default browser, does not have any such problems. I think this problem has existed for some time now, but in testing my recent changes before migrating them over here, I tested in both versions of IE and the problem stuck out like the proverbial sore thumb.
In IE6, the image does not seem to appear at all. If I scroll so that the title is off the page and then scroll back, the image magically appears. In either version, if I hover over the title (which is also a permanent link to the entry) or any link in the subsequent body of the post, the image disappears — but frustratingly, only if the page is at certain positions. If I scroll up or down, even a little, it may not have any problem.
I would certainly appreciate any input or thoughts anyone may have on this.
Specifically this is happening to a
within a bunch of nested
s. They are displayed and undisplayed by altering their .display properties in JavaScript, but Jason's experiences lead me to believe this is not the whole cause. And I do want to retain that functionality.
When the (dark) background image isn't rendered, the (white) heading text appears invisible on top of the page's (white) background. The obvious thing to do is to give the
a black background so that the text will be visible even if the background hasn't rendered.
Naturally, IE decides to ignore that too. The colour disappears just like the image. Could this be isolated to the heading tags?
The fix
Reading on, I found this page on an interesting site about modern browser bugs, Position Is Everything. I've bookmarked that one.
Anyway, I got three things out of this find.
- The bug has been experienced by others, and documented. Quite a while ago, actually (July 30, 2004).
- The bug is not limited to heading tags. The PIE page uses lists (unordered and definition) to make their point.
- The bug is fairly easily solved.
So what's the fix?
position: relative;
Ah, the cure for all ills. Or pretty much, anyway.
When the (dark) background image isn't rendered, the (white) heading text appears invisible on top of the page's (white) background. The obvious thing to do is to give the
a black background so that the text will be visible even if the background hasn't rendered.
Naturally, IE decides to ignore that too. The colour disappears just like the image. Could this be isolated to the heading tags?
The fix
Reading on, I found this page on an interesting site about modern browser bugs, Position Is Everything. I've bookmarked that one.
Anyway, I got three things out of this find.
- The bug has been experienced by others, and documented. Quite a while ago, actually (July 30, 2004).
- The bug is not limited to heading tags. The PIE page uses lists (unordered and definition) to make their point.
- The bug is fairly easily solved.
So what's the fix?
position: relative;
Ah, the cure for all ills. Or pretty much, anyway.
