Top border around hyperlink not appearing in IE7

[mrmozer]

My website looks perfect in all browsers except Internet Explorer.
I tested it on IE7 and my navigation links don't look too good.
Problem: On HOVER the top border around the link does not appear ONLY IN IE!

Link to my site:
http://www.s239171386.onlinehome.us/index.php

My CSS:

#navbar{
background-image: url(../images/navbar_blue.png);
background-repeat: no-repeat;
height: 60px;
width: 798px;
text-align:center;
position: relative;
margin-top:29px;
margin-left:6px;
outline: none;
}
#navlinks{
position:relative;
width:797px;
height:45px;
top:15px;
}
#navbar a:link {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
letter-spacing: 2.3pt;
font-size: 14px;
color: #BBB;
text-decoration: none;
padding-top:5px;
padding-bottom: 5px;
border: 1px dashed #212121;
}
#navbar a:hover {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
letter-spacing: 2.3pt;
font-size: 14px;
color: #FFF;
text-decoration: none;
background-color: #333;
padding-top:5px;
padding-bottom: 5px;
border: 1px dashed #557DAD;
overflow:visible;
visibility:visible;
}

and my HTML:

<div id="navbar">
<div id="navlinks">
<ul>
<li><a href="index.php">&nbsp;Home&nbsp;</a></li>
<li><a href="about.php">&nbsp;About&nbsp;</a></li>
<li><a href="portfolio/gallery/index.php">&nbsp;Portfolio</a></li>
<li><a href="/contact">&nbsp;Contact&nbsp;</a></li>
</ul>
</div>
</div>

Any help would be appreciated :)

[Nile]

In /CSS/layout_blue.css, change:


#navbar a:link {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
letter-spacing: 2.3pt;
font-size: 14px;
color: #BBB;
text-decoration: none;
padding-top:5px;
padding-bottom: 5px;
border: 1px dashed #212121;
}
#navbar a:visited {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
letter-spacing: 2.3pt;
font-size: 14px;
color: #BBB;
text-decoration: none;
padding-top:5px;
padding-bottom: 5px;
border: 1px dashed #212121;
}


To:


#navbar a:link, #navbar a:visited {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
letter-spacing: 2.3pt;
font-size: 14px;
color: #BBB;
text-decoration: none;
padding-top:5px;
padding-bottom: 5px;
border: 1px dashed #212121;
height: 0px;
}


I highlighted what I changed to make it work, and you'll notice I combined the a:visited, and a:link because they were the same thing. From what I figured out, you had to give the link a height, so I gave it 0px (it will auto-extend if needed).

[mrmozer]

Negative! The height attribute didn't seem to affect anything.

Any other suggestions?

[Nile]

It worked for me, can you please apply the changes so i can see for me self?

[mrmozer]

I have made the changes and uploaded it.
Did you test on Internet Explorer 7?

[Nile]

Yes, I did test it in IE 7. It should work. Mind providing a screen shot?
You can see it working in IE 7 here: http://unlinkthis.net/examples/protoquest.html

[mrmozer]

I have attached a screen shot.

[Nile]

Your screen shot is to small for me to see details. (Look at my updated post above).

[mrmozer]

Yes it does work on your link! That's really odd.

I'm using a mac and I'm doing my testing on Windows Server 2008 on a virtual machine. I doubt that has anything to do with it but I guess I'll have to check on an actual PC just to be sure.

Thanks for your help.

[Nile]

Hmm, I'm not much of css guy so I wouldn't really know whats going on here... Maybe another member can step up and help.