Disappearing Background Image in IE8

Question

Hi all,

I've got some button rollovers that work fine in browsers other than IE. I'm not using JQuery and this isn't IE6 -- I haven't tested it in IE6 yet. It's in IE8.

You can see what's happening here (look at it in IE vs. Firefox):

http://www.brighttext.com/socialtech/index.html

I'm using the technique of showing one or another button in response to a rollover by changing the background-position. I've tried various solutions proposed for IE6 issues but nothing has worked. Can anyone see what's going on here? And why can we see the Home button in IE, but not the others?

Code:

  <ul>
    <li id="homeLink" class="ord"><a href="index.html">Home</a></li>
    <li id="faqLink" class="current"><a href="faq.html">FAQ</a></li>
    <li id="speakersLink" class="ord"><a href="speakers.html">Speaker Info</a></li>
    <li id="sponsorsLink" class="ord"><a href="sponsors.html">Sponsor Info</a></li>
  </ul>

css for the first two buttons (I did this for all four) inside the div, which is called mastheadLeft:

 #mastheadLeft li#homeLink a {
  height: 32px;
  width: 86px;
  display: block;
  text-indent: -1000em;
  background: url(../images/home_dual.jpg) no-repeat left top ;
  border: none;
 }

 #mastheadLeft li#homeLink.current a {
  background-position: left top;
 }

 #mastheadLeft li#homeLink.current a:hover {
  background-position: left top;
 }

 #mastheadLeft li#homeLink.ord a {
  background-position: left bottom;
 }

 #mastheadLeft li#homeLink.ord a:hover {
  background-position: left top;
 }

 #mastheadLeft li#faqLink a {
  height: 34px;
  width: 75px;
  display: block;
  text-indent: -1000em;
  background: url(../images/faq_dual.jpg) no-repeat left bottom;
  border: none;
 }


 #mastheadLeft li#faqLink.current a {
  background-position: left top;
 }

 #mastheadLeft li#faqLink.current a:hover {
  background-position: left top;
 }

   #mastheadLeft li#faqLink.ord a {
  background-position: left bottom;
 }

 #mastheadLeft li#faqLink.ord a:hover {
  background-position: left top;
 }

Answer 1

Hi David

i've tried a lot of stuff including recreating your project (copying and pasting your source and css from the site given). from my side using my own images, it works perfectly in both IE 8 and firefox 3.

however i tried

http://www.brighttext.com/socialtech/images/faq%5Fdual.jpg

in both browsers. and it opens the image in firefox but opens an unavailable image in IE 8. so maybe you should have a look at where your images are stored. like i said, with my test images, it seems to work perfectly.

Answer 2

Is there a reason some of the images are PNGs and some are JPGs? I'm curious if the missing-file issue has something to do with file type. Probably not, but I'm interested.

Also, when I do background images in anchor tags like this, the image has the no-hover half sitting on top of the hover half and do my CSS like this:

    #mastheadLeft li a {
      height: 34px;
      display: block;
      text-indent: -1000em;
      border: none;
    }

    #mastheadLeft li a:hover, #mastheadLeft li.current a {
      background-position:0 -34px;
    }

   #homeLink a {
      width: 86px;
      background: url(/images/home_dual.jpg) no-repeat;
    }

   #faqLink a {
      width: 75px;
      background: url(/images/faq_dual.jpg) no-repeat;
    }

That makes the CSS a lot cleaner and sets the exact same rules for all elements except the ones that are unique which, in this case, is just the background image used and the width. That way if something's going wrong, it'll be wrong for all the images.

I also use exact pixels instead of depending on the generic "top," "left," etc. values in CSS. More exact control.

Perhaps not a final answer, but at least it'll clean up your CSS so it's easier to find the problem.