I have a hover state on my navbar which consists of the text turning green and a 4px green border appearing under the text. It works fine in Firefox, Safari and IE6 but in IE7 I get the green text but no border below. Can anyone see why?
HTML
CSS
HTML
Code:
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="a.html">home</a></li>
<li><a href="b.html">portfolio</a></li>
<li><a href="c.html">jargon</a></li>
<li><a href="d.html">pricing</a></li>
<li><a href="e.html">build a pc</a></li>
<li><a href="f.html">faq</a></li>
<li><a href="g.html">links</a></li>
<li><a href="h.html">contact</a></li>
</ul>
</div>
CSS
Code:
#navcontainer ul {
padding: .2em 0;
margin: 0;
list-style-type: none;
background-color: #3A4C59;
width: 100%;
text-align: center;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
height: 23px;
letter-spacing: 0px;
margin-bottom: 5px;
border-bottom: #CCC solid 2px;
border-right: #CCC solid 2px;
}
li { display: inline; }
li a {
text-decoration: none;
color: #CCCCCC;
padding: .2em 1em;
font-size: 14px;
line-height: 18px;
background-color: #3A4C59;
}
li a:hover {
color: #A8B842;
border-bottom-color: #A8B842;
border-bottom-style: solid;
border-bottom-width: 4px;
}