Strange CSS Bug?

**VersusMG** · December 16th, 2005, 06:05 PM

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:

Code:

<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:

Code:

.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.

**VersusMG** · December 16th, 2005, 06:11 PM

Fixed the FF bug, but i still can't get the IE bug to work.

**DDD** · December 16th, 2005, 06:19 PM

you have "nave" on one statement is it supposed to be "nav" like the others?

Also try DIV.nav ......

Oh and use display: block; I think that will allow you to assign a height. I am sure I am missing something but those should put you on the right track. I am burnt out from css and its friday.....i want to go home.

Oh and can you post a comp (image) of how the menu is supposed to behave?

**VersusMG** · December 16th, 2005, 08:06 PM

Hey DDD,

I changed them to images to make it look nicer and used the tutorial on Kirupa that does the long image that gets moved up on the hover state, but they are automatically lining up on top of each other rather than just going straight across?

http://www.versusmediagroup.com/firstventure/

You can see the link here where there not going straight across. Here is the HTML:

Code:

<div id="nav"><img src="includes/images/nav_bg_2.gif" alt="NavBackGround" /><a href="#" id="mens"></a><a href="#" id="womens"></a><a href="#" id="about"></a><a href="#" id="contact"></a><a href="#" id="home"></a></div>

And here is the CSS:

Code:

#nav {
	height:37px;
	width:751px;
}

#mens{
	height: 37px;
	width: 103px;
	overflow: hidden;
	background:url(images/mens.gif) top left no-repeat;
	display: block;
}
 
#mens:hover{
	background-position: bottom left;
}

#womens{
	height: 37px;
	width: 123px;
	overflow: hidden;
	background:url(images/womens.gif) top left no-repeat;
	display: block;
}
 
#womens:hover{
	background-position: bottom left;
}

#about{
	height: 37px;
	width: 76px;
	overflow: hidden;
	background:url(images/about.gif) top left no-repeat;
	display: block;
}
 
#about:hover{
	background-position: bottom left;
}

#contact{
	height: 37px;
	width: 89px;
	overflow: hidden;
	background:url(images/contact.gif) top left no-repeat;
	display: block;
}
 
#contact:hover{
	background-position: bottom left;
}

#home{
	height: 37px;
	width: 50px;
	overflow: hidden;
	background:url(images/home.gif) top left no-repeat;
	display: block;
}
 
#home:hover{
	background-position: bottom left;
}

**VersusMG** · December 16th, 2005, 08:12 PM

I am aware that apparel is spelled wrong with men's apparel!

**VersusMG** · December 16th, 2005, 08:53 PM

Fixed it

**DDD** · December 16th, 2005, 09:01 PM

what was the fix?? Sorry dude I was drained.....I actually had th same issues with this layout http://www.deepixel.com/clients/ISG/template.htm

I could have provided a better explanation but I was tired.