Anisomaru77
New Member
So, I have an issue with the hover state of a link in IE8. Code is as follows:\[code\]<div id="navigation"> <a href="http://stackoverflow.com/" class="home">Home</a></div>\[/code\]And the CSS:\[code\]#navigation { float: right; height: 29px; margin: 50px 0 0 23px}#navigation a { color: #FFF; float: left; font-size: 120%; height: 25px; margin-right: 7px; padding: 2px 10px; text-align: center; width: 104px;}#navigation a.home { background-color: #f4e034;}#navigation a.home:hover { background-color: #fffbd4;}\[/code\]Now, this works fine in every other browser I have tested in (Chrome, Safari, FF, IE6, and IE7), it just won't change the background color of the link in IE8 on hover.I have tried adding \[code\]display: block\[/code\] and \[code\]display: inline-block\[/code\] to the \[code\]a\[/code\] element. I have also tried adding \[code\]!important\[/code\] after the background-color in the hover tag. I have also made sure that there are no other elements in the CSS that is affecting this.Googling this problem gives me a bunch of things regarding the IE8 beta, which this is not. It also gives me answers for menu related links, which this is not. It gives me answers for things being affected that aren't background-color. And it gives me things where changing the font-color works, but not the background-color (neither works in my case).Just wondering if anyone else has ever noticed this issue and has something they can provide on this. Let me know, thanks in advance.