Title: CSS Hover Issue in Internet Explorer Last modified: August 19, 2016 --- # CSS Hover Issue in Internet Explorer * Resolved [skustes](https://wordpress.org/support/users/skustes/) * (@skustes) * [17 years, 2 months ago](https://wordpress.org/support/topic/css-hover-issue-in-internet-explorer/) * I’m having an interesting CSS issue between Firefox and Internet Explorer. * On my site, Firefox is rendering the CSS as desired, but IE isn’t and I can’t chase it down. Here’s the test site: [http://lifespotlight.com/testspotlight/](http://lifespotlight.com/testspotlight/) If you look in Firefox, you see that Fitness is highlighted in white with black text, just as I want. In IE, it’s not changing the text to black…as you can see, Fitness is highlighted white, but you can’t see the text without mousing over it…for some reason it’s ignoring my code to set the color to 000000. * Here’s the CSS code that I’m using to make that hover and “selectedspotlight” class. Notice that hover and selectedspotlight are using the same exact CSS block. * ``` #nav ul { margin: 0px; padding: 0px; list-style: none; } #nav a, #nav a:visited { color: #FFFFFF; display: block; font-weight: bold; margin: 0px; padding: 7px 20px 7px 20px; border-right: 1px solid #FFFFFF; border-left: 0px solid #FFFFFF; } #nav a:hover, #nav a.selectedspotlight { background: #FFFFFF; color: #000000; display: block; text-decoration: none; margin: 0px; padding: 7px 20px 7px 20px; } ``` * Here’s what is being rendered from the PHP. Based on this, it seems that my “ selectedspotlight” should be getting called on that Fitness link. Is something wrong with the CSS or the HTML? * ``` ``` * Here’s all of the code for the Navbar section in case you want to see the rest of the HTML going on in there. * ``` #navbar { //background: #; width: 960px; height: 28px; font-size: 12px; font-family: Arial, Tahoma, Verdana; color: #FFFFFF; font-weight: bold; margin: 20px 0px 10px 0px; padding: 0px 0px 30px 0px; border-top: 0px solid #1A4182; border-bottom: 0px solid #1A4182; } #navbar a, #navbar a:visited { color: #FFFFFF; font-size: 11px; text-decoration: none; text-transform: uppercase; padding: 0px 0px 0px 3px; } #navbar a:hover { color: #FFFFFF; text-decoration: underline; padding: 0px 0px 0px 3px; } #navbar p { color: #FFFFFF; margin: 0px auto 0px; padding: 0px 0px 0px 10px; font-weight: bold; } #navbarleft { width: 950px; float: left; margin: 0px; padding: 0px; } #navbarright { width: 90px; font-size: 11px; float: right; margin: 0px; padding: 7px 0px 0px 0px; border-right: 0px solid #585858; } #navbarright a img { border: none; margin: 0px 0px 0px 0px; padding: 0px; } #nav { margin: 0px; padding: 0px; list-style: none; } #nav ul { margin: 0px; padding: 0px; list-style: none; } #nav a, #nav a:visited { color: #FFFFFF; display: block; font-weight: bold; margin: 0px; padding: 7px 20px 7px 20px; border-right: 1px solid #FFFFFF; border-left: 0px solid #FFFFFF; } #nav a:hover, #nav a.selectedspotlight { background: #FFFFFF; color: #000000; display: block; text-decoration: none; margin: 0px; padding: 7px 20px 7px 20px; } #nav li { float: left; margin: 0px; padding: 0px; } #nav li li { float: left; margin: 0px; padding: 0px; width: 150px; } #nav li li a, #nav li li a:link, #nav li li a:visited { background: #850101; color: #FFFFFF; width: 160px; float: none; margin: 0px; padding: 7px 30px 7px 10px; border-bottom: 1px solid #DDDDDD; } #nav li li a:hover, #nav li li a:active { background: #000000; color: #FFFFFF; padding: 7px 30px 7px 10px; } #nav li ul { position: absolute; width: 10em; left: -999em; } #nav li:hover ul { left: auto; display: block; } #nav li:hover ul, #nav li.sfhover ul { left: auto; } ``` * Thanks for any help you can provide!! Viewing 4 replies - 1 through 4 (of 4 total) * [Elpie](https://wordpress.org/support/users/elpie/) * (@elpie) * [17 years, 2 months ago](https://wordpress.org/support/topic/css-hover-issue-in-internet-explorer/#post-1026283) * Fix the CSS errors that you can see here: [http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Flifespotlight.com%2Ftestspotlight%2F](http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Flifespotlight.com%2Ftestspotlight%2F) That will help you see where your CSS is going wrong. * If you are looking at your site in Internet Explorer 6 do yourself a favour and upgrade. IE6 does not handle :hover and :active states very well. * Thread Starter [skustes](https://wordpress.org/support/users/skustes/) * (@skustes) * [17 years, 2 months ago](https://wordpress.org/support/topic/css-hover-issue-in-internet-explorer/#post-1026318) * Hey Elpie, thanks for the link. I’ll look into fixing those and see what I come up with. I use Firefox, but in testing it, I checked it in IE6. It appears that IE5 and 7, along with Safari all render the site properly. Going to put a bit more effort into fixing this since 1 in 8 of our users are on IE6, but hoping people start upgrading since IE8 is now out. * Thread Starter [skustes](https://wordpress.org/support/users/skustes/) * (@skustes) * [17 years, 2 months ago](https://wordpress.org/support/topic/css-hover-issue-in-internet-explorer/#post-1026323) * Hey Elpie, took your advice and fixed those errors (except 4 that appear to be CSS 3.0 compatibility things). IE6 is now rendering properly. * Thanks for your help! * [Elpie](https://wordpress.org/support/users/elpie/) * (@elpie) * [17 years, 2 months ago](https://wordpress.org/support/topic/css-hover-issue-in-internet-explorer/#post-1026364) * You are very welcome 🙂 * If you haven’t already got it, grab the Web Developer Toolbar extension for Firefox. It has a whole lot of nice features to help with design, including one-click buttons for checking that CSS is validating (which can be used on local files as well as pages that are already up). Viewing 4 replies - 1 through 4 (of 4 total) The topic ‘CSS Hover Issue in Internet Explorer’ is closed to new replies. * 4 replies * 2 participants * Last reply from: [Elpie](https://wordpress.org/support/users/elpie/) * Last activity: [17 years, 2 months ago](https://wordpress.org/support/topic/css-hover-issue-in-internet-explorer/#post-1026364) * Status: resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics