0

I am using a superfish menu to show a cart icon. When hovering over the cart icon the menu drops down. The link state contains a background image of a shopping cart. When hovering over the link, the background image is being switched to a darker image and the surrounding space is being filled with white. This seems to be working fine in FF, but I am having issues in both IE7 and IE8. In IE7 and IE8, the problem is that the background image does not show up for link state or hover state. This only happens to me when I check it on an actual machine with IE7 and IE8 installed. It doesn't seem to be working in IE9 with the respective browser mode selected. Also doesn't seem to be replicating on a virtual machine. The question is: What is causing the images to not show up in IE7 and IE8? The code is a bit too long to paste here.

Updated JS Fiddle http://jsfiddle.net/SeasonEnds/nfYDC/2/

boggsey
  • 152
  • 10

1 Answers1

0

Based on your fiddle, you are setting the background to both an image and 'none' when you are hovering.

.cart li:hover, .cart li.sfHover,
.cart a:focus, .cart a:hover, .cart a:active {
    background:#fcfcfc;
}

Try setting just the background-color, instead of using the shorthand for background, which implies a background image of 'none' when nothing is set. It's possible there are some conflicts there (it would be easier to test if your fiddle CSS had valid image references).

Matthew Darnell
  • 4,538
  • 2
  • 19
  • 29
  • Sorry about that. I pasted the wrong link. Original post link changed to one with dummy images. – boggsey May 17 '12 at 22:25
  • I went through the entire superfish css file and changed all background: declarations that didn't have an image in them to background-color. This did cause some weird cascading of the cart image, that I had to resolve by going back in and adding background-image:none. This showed a small portion of the image on hover, but that's it. I'm now thinking there might need to be height and width added to the li with the cart background. – boggsey May 18 '12 at 18:05
  • So, that was the answer. The above steps showed the image, then all I had to do was stop being so specific for IE7 and IE8 by changing a.newcart:link to .newcart. – boggsey May 21 '12 at 19:08