Internet Explorer omitting border-bottom on link

[twQ]

Internet Explorer 6 and 7 (can't test 8, I don't have it) omit my bottom border on this sites links.

EDIT: Link removed. Problem solved. See Traq's 2nd post.

Home, Signup, etc have a 2px border on the bottom. Gray normally on hover its black. Firefox and Opera display it correctly but not either IE. What's the cause?

Also if you view the site in 8 if you see any problems send me a screenshot please. Thanks!

Relevant CSS:


#content {
width: 75%;
height: 500px;
margin: auto;
background: #FFFFFF;
border: #999999 1px solid;
border-top-width: 0px;
}

#content #nav {
width: 100%;
font-size: 10pt;
text-align: right;
}

#content #nav a {
padding-left: 10px;
padding-right: 10px;
padding-bottom: 2px;
margin-right: 5px;
color: #000000;
text-decoration: none;
border: #999999 1px solid;
border-bottom-width: 2px;
border-top-width: 0px;
}

#content #nav a:hover {
border-bottom-color: #000000;
}


Relevant HTML:


<div id="nav">
<a href="home">Home</a>
<a href="home">Signup</a>
<a href="home">FAQ/Help</a>
</div>


#content is just a container. Nothing special to it.

[traq]

IE8 shows it correctly.

Just a guess, but maybe try replacing
#content #nav a {
padding-left: 10px;
padding-right: 10px;
padding-bottom: 2px;
margin-right: 5px;
color: #000000;
text-decoration: none;
border: #999999 1px solid;
border-bottom-width: 2px;
border-top-width: 0px;
}with
#content #nav a {
padding-left: 10px;
padding-right: 10px;
padding-bottom: 2px;
margin-right: 5px;
color: #000000;
text-decoration: none;
border: #999999 1px solid;
border-bottom: #999999 2px solid;
border-top-width: 0px;
}Also, IE 6 (maybe 7 also?) has trouble with :hover.

[twQ]

I was aware of :hover problems but to my understanding they shouldn't affect me because my links aren't set to block, and block seems to be the major problem.

As to the idea, I can't test in Internet Explorer 7 but 6 is not working. And the border doesn't show at all I meant not just on hover.

Thanks for trying!
Tim

[traq]

I've been looking around and there are plenty of misrendered border issues in IE6, though I haven't found anything specifically about an anchor border.
Try adding position: relative; to your nav anchors...?

As for the :hover issue (or not-issue-at-the-moment), look at whatever:hover (http://www.xs4all.nl/~peterned).

[twQ]

That did it! Thanks Traq! I Googled and didn't see anything about this. Then again IE is full of issues so it's not an easy thing to find a specific issue. Anyways, thank you very much that fixed my issue. And also apparently IE7 has the same odd issue.

Tim

[traq]

no prob