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.