Help: Navigation arrow problem... (Earn $3)

Hello Everyone,
I am using the following design: http://www.oswd.org/design/preview/id/2876 for www.servespot.net , I didnt change the class for the active navigation thing which has the arrow on it, however, now my site has two arrows on it. Whoever helps me the most, I will send $3 via paypal or if i get good help from multiple people, I will send to each person.

Class for the active navigation link (I didnt change anything):

	.bar li.active { 
		background: #E0691A url(bar.gif) no-repeat center top; 
		color: #fff;
		font-weight: bold; 
		padding: 7px 10px 6px 10px;
	}

Code (markup):

Navigation bar code:

		<div class="bar">
			<ul>
				<li class="browse_category"></li>
				<li class="active"><a href="index.html" accesskey="h">Home</a></li>
				<li><a href="network.html" accesskey="n">Network</a></li>
				<li><a href="gameservers.html" accesskey="g">Game Servers</a></li>
				<li><a href="dedicatedservers.html" accesskey="d">Dedicated Servers</a></li>
				<li><a href="forum.html" accesskey="f">Forum</a></li>
				<li><a href="contact.html" accesskey="c">Contact Us</a></li>
			</ul>
		</div>

Code (markup):

bar class (I didnt change):

.bar { 
	clear: both;
	font-size: 1.1em;
	height: 30px; 
	color: #FFF;
	margin: 0 0 0 0px; 
	background: #FF9148;
}

Code (markup):

Best Regards,
Chris

 

Hi,

That renders fine for me what browser r you using?

 

At the start of the stylesheet, use
/*
a { color: #E0691A; background: inherit;}
*/
a { background: inherit inherit inherit inherit inherit; color: #E0691A; }
Then in the bar rules
/*
.bar li a {
font-weight: bold;
color: #FFF;
background: inherit;
text-decoration: none;
}

*/
.bar li a { background: inherit inherit inherit inherit inherit; font-weight: bold; color:#FFF; text-decoration: none; }
.bar li a:hover {
color: #E0691A;
background: inherit;
}
.bar li.active a:hover {
background: #E0691A;
color: #E0691A;
}
If it works, remove commented rules.

 

I was using Firefox 1.5, but I upgraded to 2.0 and it still does not work. When I edit and preview it in Dreamweaver 2004, it looks fine. What browser does it work in?

Thanks for the code, however, I tried it and it didnt fix it.

Thanks everyone!

 

.bar li a { 
	font-weight: bold;
	color: #FFF; 
	text-decoration: none;
	[b]background-image: none;[/b]
} 

Code (markup):

Add "background-image: none;".

 

i agree with SoKickIt, just add it also on the hover so when they hover the background arrow does not show up as well... i tested it in IE worked fine before and after, just firefox gave the issue and with this code it works and is tested

	.bar li a { 
		font-weight: bold;
		color: #FFF; 
		background: none;
		text-decoration: none;
	} 
	
	.bar li a:hover { 
		color: #E0691A; 
		background: none;
	} 

Code (markup):

 

Thanks for the help everyone, however, its always worked with IE, I want to get it to work with Firefox as well as IE.

 

the code above is the fix for firefox

 

Thanks everyone! SoKickIt and DatR, PM me your paypal.

THREAD CLOSED

 

No problem. If you really want to give that money away, you can do it here:

http://www.digitalpoint.com/tools/donate.html

 

agreed. the money for me can go there as well