CSS rollover problems with Internet Explorer 7

Question

I wrote some CSS in my HTML code to create rollover buttons. Then i tried to run it with IE 7 and surprise! it doesn't run. In fact it shows both the button and underlying rollover. How can i get around IE's inability to cache background images? Preferably using CSS but javascript 'will' be tried.

Sample CSS:

 #Menu 
 { 
    width: 100%; 
    height: 32px; 
    margin-top: 93px;
    padding-left: 13px;
}


 #Menu a 
{ 
    height: 32px; 
    line-height: 32px; 
    width: 123px; 
    background: url("img/menu.png") top left no-repeat; 
    background-position: -123px 0; 
    float: left; 
    margin-left: 3px; 
    text-decoration: none; 
    color: #1e1e1d; 
    font-size: 12px; 
    text-align: center; 
}

 #Top #Menu a:hover, #Top #Menu a.active 
{ 
    background-position: 0px 0; 
    text-decoration: underline;
}

Answer 1

if you are using the :hover pseudo-selector, then it won't work in IE unless it is an anchor tag. Try changing the button into an anchor. You can still make it look like a button using css.

If you want to use javascript, then have a look at jQuery.

Answer 2

Try making sure your CSS background syntax is correct. Some browsers let you specify the properties in any order however IE will choke. You should specify the attachment in the form X Y (horizontal then vertical). You currently have top left. Make it left top. Also you have no-repeat at the end of the line, it should come just after the url declaration and before the position declaration.

The order for CSS background shorthand values should be:

• background-color
• background-image
• background-repeat
• background-position
• background-attachment

eg. background: #fff url(example.jpg) no-repeat left top fixed;

Answer 3

Well firstly you are giving conflicting instructions ...

background: url("img/menu.png") top left no-repeat;
background-position: -123px 0;

... the background is already positioned using shorthand.

I assume that your regular and hover states both share the same image, so why not do both with shorthand? Remove...

background-position: -123px 0;

... and for your hover and active states, use ...

background-position: bottom left;

Then have both your states in one image, one below the other (which I assume is what you've been trying anyway).