Reputation: 153
I have toggle tabs that when on click the background changes when active(I am using sprite). The problem is that the background doesn't change immediately, I still need to hover it to apply the changes. I think that using background or background-image is the problem because when I try using background-color, it works fine. This problem only occurs on IE6.
$('#menu a').click(function(e) {
e.preventDefault();
$('a.selected').removeClass('selected');
});
#menu-tabs ul li a {
color: #000;
background-image: url(../images/sprite.png) 0 20px no-repeat;
}
#menu-tabs ul li a.selected {
color: #05416B;
background-image: url(../images/sprite.png) 0 0 px no-repeat;
}
Upvotes: 0
Views: 118
Reputation: 21191
You have syntax errors in your rules; try correcting those first.
#menu-tabs ul li a {
color: #000;
background: url(../images/sprite.png) 0 20px no-repeat;
}
#menu-tabs ul li a.selected {
color: #05416B;
background: url(../images/sprite.png) 0 0 no-repeat;
}
background-image
only supports image URL(s) (depending on browser; not all support multiple images). I suspect that, if your rules work on other browsers, then those browsers are simply normalizing your rules to the shorthand shown.
Upvotes: 2
Reputation: 1945
Internet Explorer 6 has LOTS and LOTS of CSS bugs! Now, coming to your question, Why background color works and why background image doesn't work. Color is something that the browser has in itself implicitly but it has to explicitly "load" images or other stuff. Well, with IE6, its a total guess work here. I will recommend you to visit this site, http://positioniseverything.net/ They have a very comprehensive list of IE6 bugs. You may also visit the official Microsoft website on CSS compatibility. http://msdn.microsoft.com/en-us/library/cc351024(VS.85).aspx
If you are still having problems, post a link to your actual page. Hope this helps.
Upvotes: 1