{"id":30,"date":"2006-08-20T22:09:19","date_gmt":"2006-08-20T22:09:19","guid":{"rendered":"http:\/\/kera.name\/articles\/?p=30"},"modified":"2006-08-20T22:59:06","modified_gmt":"2006-08-20T22:59:06","slug":"ie-is-background-image-shy","status":"publish","type":"post","link":"https:\/\/kera.name\/articles\/2006\/08\/ie-is-background-image-shy\/","title":{"rendered":"IE Is Background-Image Shy"},"content":{"rendered":"

As I began sprucing up my Portfolio<\/a> 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.<\/p>\n

Roll on Jason at izzywizzy.org<\/a>:<\/p>\n

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.<\/p>\n

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.<\/p>\n

I would certainly appreciate any input or thoughts anyone may have on this.<\/p><\/blockquote>\n

Specifically this is happening to a <\/p>\n

within a bunch of nested <\/p>\n
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.<\/p>\n

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 <\/p>\n

a black background so that the text will be visible even if the background hasn't rendered.<\/p>\n

Naturally, IE decides to ignore that too. The colour disappears just like the image. Could this be isolated to the heading tags?<\/p>\n

The fix<\/strong><\/p>\n

Reading on, I found this page<\/a> on an interesting site about modern browser bugs, Position Is Everything<\/a>. I've bookmarked that one.<\/p>\n

Anyway, I got three things out of this find.<\/p>\n

    \n
  1. The bug has been experienced by others, and documented. Quite a while ago, actually (July 30, 2004).<\/li>\n
  2. The bug is not limited to heading tags. The PIE page uses lists (unordered and definition) to make their point.<\/li>\n
  3. The bug is fairly easily solved.<\/li>\n<\/ol>\n

    So what's the fix?<\/p>\n

    position: relative;<\/p>\n

    Ah, the cure for all ills. Or pretty much, anyway.<\/p>\n","protected":false},"excerpt":{"rendered":"

    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.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[],"tags":[9],"_links":{"self":[{"href":"https:\/\/kera.name\/articles\/wp-json\/wp\/v2\/posts\/30"}],"collection":[{"href":"https:\/\/kera.name\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kera.name\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kera.name\/articles\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kera.name\/articles\/wp-json\/wp\/v2\/comments?post=30"}],"version-history":[{"count":0,"href":"https:\/\/kera.name\/articles\/wp-json\/wp\/v2\/posts\/30\/revisions"}],"wp:attachment":[{"href":"https:\/\/kera.name\/articles\/wp-json\/wp\/v2\/media?parent=30"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kera.name\/articles\/wp-json\/wp\/v2\/categories?post=30"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kera.name\/articles\/wp-json\/wp\/v2\/tags?post=30"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}