CSS a:hover background-color display:block
It seems like a:hover {background-color:value;} does not work as expected in IE8 beta2 if the element has display:block or inline-block. The hover style will get applied if there is a background-color value defined for the default state only.
Code Snippet<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Strict//EN"><META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<HTML>
<HEAD><title></title><STYLE>
HTML BODY {
background-color : #e7e7e7;
}
A {
display : block;
}
span.withbg A {
background-color:white;
}
A:hover,
span.withbg A:hover {
color:blue;
background-color:black;
}
</STYLE></HEAD>
<BODY><p>
<span><A href="#">A link WITHOUT background color</A></span>
<span class="withbg"><A href="#">A link WITH background color</A></span>
</p></BODY>
</HTML>
All Replies
Hi Clancey,
Can you describe the desired effect in more detail? I've run your sample in both Firefox and IE 8 Beta 2 and it looks like the background color is applied to both links when you point to them with the mouse.
I did notice a difference when viewing the page in IE8 Mode, but given the Firefox behavior, I'm not sure I really understood what you're trying to achieve and what's happening instead. Would you mind clarifying?
Thanks in advance...
-- Lance
- @clanceyp
Yes, there is a bug here, but there's a few catches.
1.) It works 100% fine, if (AND ONLY IF) you are in 100% IE8 Standards mode, which means you must have a valid DOCTYPE, ***AND*** you MUST be viewing the page on an INTERNET (not INTRANET) site. For reasons that no good explanation was ever given, IE8 defaults to standards mode on the INTERNET, but defaults to Standards-Dont-Matter mode if you are viewing a site on the INTRANET.
The bug you are noting, affects previous versions of IE is tracked here if you are intested:
http://webbugtrack.blogspot.com/2008/02/bug-229-not-everything-is-absolute-in.html
Best of luck
