Strange CSS Bug?

programming web dev
1

I have a strange bug that i have found working with CSS and Dreamweaver and didn’t know if it was something that I was doing wrong.

I am trying to set up a background for my links that when you rollOver a link activates the background. Now here is the wierd part. It works fine when I press F12 and Test it in FF locally, but when I put it on my server it doesn’t keep the spacing? Then when i test it in IE both locally and on the server it only outlines the text no matter how much I increase the padding.

Here is the simple navigation in HTML:

<div class="nav"><a href="#">mens apperal</a><a href="#">womens apperal</a><a href="#">about us</a><a href="#">contact us</a><a href="#">home</a></div>

And here is the related CSS:

.nav {
	width:739px;
	margin:16px 0 0 0;
	right:0;
	padding:0;
	display:block;
	text-align:right;
	text-transform:uppercase;
}

.nave a:link {
	text-decoration:none;
	color:#d7d7d7;
	padding:25px 10px 3px 10px;
}

.nav a:hover {
	background-color:#13507b;
	background-position:top;
	background-repeat:repeat-x;
	padding:25px 10px 3px 10px;
}

a:visited {
	text-decoration:none;
	color:#d7d7d7;
	padding:25px 10px 3px 10px;
}

a:active {
	text-decoration:underline;
	color:#d7d7d7;
	padding:25px 10px 3px 10px;
}

It is the strangest problem i have encountered. The effect that i want to have happen is best seen here.

http://www.versusmediagroup.com/firstventure

But the spacing is off.