Updated: IE 8 Release Candidate 1 fixes this problem.
I ran into this problem recently while working on a site, and was not able to solve it. I just ran into it again, so I’m posting in the hopes that someone else might find this and have a solution.
I have a bunch of links within a list. When a user hovers over the link, the anchor tag gets a background fill—a standard behavior for a link. This works in all browsers but IE 8. Specifically, IE 8 beta 2. I’m not sure whether to blame my code or IE 8. By default, I blame IE. But I’m sure there is some way to get around it.
body#home #col-main ul#news li {
list-style-type: none;
font-size: 1.1em;
line-height: 1.3636em;
border-bottom: 1px solid #c7e27e;
}
body#home #col-main ul#news li a {
padding: 0.5em 0;
color: #666;
display: block;
}
body#home #col-main ul#news li a:hover {
background-color: #eaeaea;
color: #333;
text-decoration: none;
}
I tried making the declarations less specific, but that had no effect on the background color:
li {
list-style-type: none;
font-size: 1.1em;
line-height: 1.3636em;
border-bottom: 1px solid #c7e27e;
}
li a {
padding: 0.5em 0;
color: #666;
display: block;
}
li a:hover {
background-color: #eaeaea;
color: #333;
text-decoration: none;
}
I’ve been having the same problem too, without any luck.
It might have something to do with the Doctype we use?
Hi Garion,
In my case, the problem fixed itself after I upgraded IE 8 beta 2 to Release Candidate 1. It seemed that the IE dev team fixed this bug. If you haven’t upgraded, try that, and see if it fixes it.
As far as the doctype, my documents are XHTML Transitional.
yeah, thanks for that. It works on the newest version.
Still, quite a weird (and worrying) bug for webdesigners
The same problem in the final release of IE8, seems they’ve gone back on themselves after RC1! but searching I found that if you specify the background colour for the normal non-hovered state the hover background colour should work ok.
I found this post because I thought I discovered an IE 8 bug regarding li anchors, and I searched for those keywords. I think we (note to self), need to stop assuming that if IE 8 does it different than we expect, or than other browsers, it’s a bug. IE 8 is quite standards-compliant (be careful what you wish for); so now, in IE 8, versus previous versions, there is a fair chance that IE 8 is right, and the others are wrong. There already such cases documented.
Graham – I didn’t realize the final release was out. I’ll need to retest this issue and see what happens. Interesting that RC 1 didn’t update itself via Windows Update. I guess the final release is a separate download.
Lee – the issue I had was with IE 8 beta 2. It resolved itself as of IE 8 RC 1. According to Graham, the issue is there again in the final release.
So far, I have not needed to make many adjustments for IE 8. It is a very capable browser as you point out. But after years of tweaking CSS just to get things working in IE 6 or 7, I have little patience for IE. I’m glad that the IE team has put in a huge effort to make IE 8 more standards-compliant. Kudos to them.
If anyone is still having issues with this particular problem, you can see what I did to fix it while I was still using IE 8 beta 2. I’ll have to retest again with the final release.
https://douglasgreen.com/ie-8-hover-problem-solved/