Search code examples
cssinternet-explorerhoverinternet-explorer-9

Troubles with IE9 Hover

I have a very simple hover function that appears to work fine in everything except IE9 (possibly IE8 and below too, haven't tested them).

Non-IE browsers do this;

Non IE

IE9 does this;

IE

I suspect from reading various post that it may be to do with the <a> tag...but even that seems to be setup ok to me. I'm a bit of a html/css/php noob, so it's probably something simple and obvious. Any help would be much appreciated.

Relevant code;

CSS File

#nav {
width: 960px;
height: 40px;
border-bottom: 1px solid #ccc;
}

#nav a {
display: inline;
padding: 10px;
text-decoration: none;
background-color: #f1f1f1;
}

#nav a:hover {
background-color: #bababa;
height: 80px;
}

PHP File

<div id="nav">
<a href="index.php">Home</a>
<a href="about.php">About</a>
<a href="#">Portfolio</a>
<a href="contact.php">Contact</a>
</div> <!-- end #nav -->
Solution

  • I believe removing the "height: 80px" from #nav a:hover will get the browser to show what you want.

    You are setting height value to an inline element and apparently IE supports that while other browsers do not.