Dotted a:hover issue in IE only

Hello!

I have an issue with dotted underlines when hovering over a link in IE only, works fine in Safari and Firefox.

#nav 
{
	position: relative;
	width:700px;
	height: 50px;
	border-top: solid 8px #336666;
}

#nav ul
{
	list-style: none;
	width: 100%;
	font-family: Georgia, Times New Roman, Times, serif;
	font-variant: small-caps;
	font-size: 16px;
	font-weight:bold;
	color: #ccc;
	padding: 10px 0px 10px 0px;
	margin: 0;
}

#nav li
{
	float: left;
	margin: 0px 20px 0px 0px;
}

#nav li a
{
	color: #ccc;
}

#nav li a:hover
{
	color: #ccc;
	border-bottom: 1px dotted;
}

Code (markup):

What could be up that means IE doesn't render it properly?

 

IE doesn't render 1px dotted borders. You can use a higher number or make an image to replicate the dots.

 

Cheers for the quick response.



However, I'm having no luck with that either:

#nav li a:hover
{
	color: #ccc;
	border-bottom: 3px dotted;
}

Code (markup):

Again, works fine in safari and firefox.

 

It appears to be a problem with IE cutting off the very bottom of Divs (1px or so).

Links not on the bottom line of a Div do appear with a 1px dotted underline. Any links on the bottom line have it but off.

Really weird problem - setting padding or margins on the bottom doesn't correct it either.

Any ideas?

 

I believe you need to specify a color for the border like so:

border:3px dotted pink;

I've never omitted the color for the shorthand border property.

 

like soulscrtatch said, it needs 3 attributes.

but I would do dashed... that works and looks better since u cant get the 1px.

 

IE render differently from other browsers...
specially on margins and padding...

on dotted lines, try to increase the pixel or create an image.