CSS - :hover is slow/laggy in IE7

Question

This is really strange. I've got this site where I have a list menu with a simple :hover effect on each item in the menu.

http://w3box.com/mat/

In Firefox it works just fine. But i IE7 atleast there's a lag. I haven't tested it in IE8 but my guess is that it's there as well.

Now, I've been trying out veriations to the code to see what might cause the issue. And I've seen alot of posts about similar scenarios. But none of them seemed to apply to my case.

So just now I noticed that in my css stylesheet, I've got this:

li:hover {
background-image: url(img/TopLine.png); 
Height:29px;

}

Strange enough, if I remove the height specifications, there is no lag! What could be causing this? Could it be layers of padding and margins to the parent li class? Or the parent class above that one?

This is the code of these items. The rest of the css you can under /main.css of the site

#header {
padding-right:7%;
height: 57px;
background-image:url(img/TopLine.png); }

.header a {
font-family:georgia;
font-size:22px;
color:#ebebeb;
text-decoration:none; }

.header li {
float:right;
list-style: none;
margin-top:10px;
padding-top:18px;   
padding-left: 23px;
padding-right: 23px;
height:23px; }

li:hover {
background-image: url(img/TopLine.png); 
Height:29px; }

Any ideas on how I can improve this?

Answer 1

I'm not really getting any lag. The first time there is a slight delay though - this is most likely because the background image is loading.

You'd be better off setting a background on the list item proper then changing the background position on hover. (There are plenty of questions on SO about this.)