IE-specific CSS background image not working
-
Website in question is hsdnc.org.
I’ve developed a custom theme which uses an image as the header background, specified in my theme’s style.css thus:
#page-wrap { background: url(images/photo-header.png) center top no-repeat; }
I want to use a different background image in IE 8 and lower, so I use conditional comments to call a special stylesheet:<!--[if lte IE 8]> <link href="<?php bloginfo('template_directory'); ?>/css/ie.css" media="screen" rel="stylesheet" type="text/css" /> <![endif]-->
And the only line in that stylesheet:
#page-wrap { background: url(images/photo-header-ie.png) center top no-repeat; }
But the IE-specific image never loads in IE 7 or 8! It triggers a 404. Developer tools show the rule as active, but the browser can’t load the image. The image is on the server with the same permissions as all my other images, which load fine. I can load the image directly in IE. When I try to load the normal header image in the IE-specific stylesheet I also get a 404. When I remove the link to the IE-specific stylesheet, the header image called in the normal stylesheet loads fine. This leads me to believe the problem is in the stylesheet…but it looks fine to me!
Other things I’ve tried: putting the call to the IE-specific image in an embedded stylesheet in the conditional comment rather than linking to the stylesheet. Doesn’t work. I cleared the browser cache, also to no avail.
The specific link throwing the 404 is: https://hsdnc.org/~%5Busername%5D/wp-content/themes/hsdnc/css/images/photo-header-ie.png (where [username] is my web hosting account username)
Not sure why the ~[username] is in there–I was developing the site without the domain name, so the site URL was in the form http://[ip-address]/~%5Busername%5D. But now we have the domain name, so the username shouldn’t show up anywhere in a link (except for true https links, but that’s a different story…I think?). Is this just an annoying cache thing? I reloaded using Ctrl + F5 but nothing changed.
I’m testing using the Microsoft VHDs (Windows 7/IE8 and Vista/IE7) in VirtualBox on Mac OS 10.6.7.
Can anyone reproduce this problem? Shed any light on it? Thanks so much!
- The topic ‘IE-specific CSS background image not working’ is closed to new replies.