Shows in IE, but not FF 1

[TheCandyman]

I'm trying to get this to show the image on my menu when it shows the id=current. It works in IE, but not in other browsers. So IE if fixing something that i'm overlooking. Any suggestions?

<a href="index.asp">Exhibits</a>
<a href="faq.asp" id="current">FAQs</a>

.buttons a {color: #FFFFFF;
	border-bottom: 1px solid;
	border-color: #e9e9e9;
	background-color: #86BAD6;
	font: 13px Verdana, sans-serif;
	font-weight: bold;
	text-decoration: none;
	display: block;
	margin: 0px;
	width: 100%;
	text-align: left;
	padding-left:12px; padding-right:5px; padding-top:6px; padding-bottom:6px}
.buttons a:visited {color: #FFFFFF; text-decoration: none}
.buttons a:hover, a:active {color: #FFFFFF; background-color: #5f98b7; border-color: #fff; text-decoration: none}
.buttons a#current {background: #5f98b7 url(linkarrow.gif) no-repeat center right; z-index:10; color: #FFFFFF; border-color: #fff; text-decoration: none}

 

[ChrisHunt]

I think your code should be

.buttons a:hover,[red].buttons[/red] a:active {color: #FFFFFF; background-color: #5f98b7; border-color: #fff; text-decoration: none}

unless you really meant to apply that style to all active links on the page, but that's not the cause of your problem.

Your code looks OK to me, there must be some other rule from somewhere else that's conflicting. I suggest you install the [link=http://chrispederick.com/work/webdeveloper/]Web Developer's Toolbar[/url] and/or [link=http://www.getfirebug.com/]Firebug[/url]. Both have features where you can click on an element and it tells you which bits of CSS are applied to it. That should help you find the problem.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[TheCandyman]

I fixed your suggestion but it didn't work...so i tried the FireBug, which by the way is very cool, and removed "width: 100%;" and it works like it should.

Have to admit, with all my firefox plugs i thought those would have caught it, but firebug did. Time to uninstall those "other" ones