Forums

kevsyers

Hey guys,

I have an issue that I'm pretty sure isn't that big of a deal to figure out, but I can't seem correct it. My navigation is suppose to highlight when you mouse over it. It actually works in Firefox but doesn't work in any other browser I've tested. I'm using a special font so I'm using images instead of just straight text.

This is my absolute very first full css site. I built it from scratch so I'm more than positive there are a load of rookie mistakes. Some of which I'm already aware of.

So here's the link: http://production.wearecaffeine.com/ubh/

Here's my html code:

<ul class=\"menu\">
			<a href=\"#\"><li id=\"classes\" title=\"classes\">Classes</li></a>
			<a href=\"#\"><li id=\"about\" title=\"about\">About</li></a>
			<a href=\"services.html\"><li id=\"services\" title=\"services\">Services</li></a>
			<a href=\"#\"><li id=\"employees\" title=\"employees\">Employees</li></a>
			<a href=\"#\"><li id=\"links\" title=\"link\">Links</li></a>
			<a href=\"#\"><li id=\"employment\" title=\"employment\">Employment</li></a>
		</ul>

I have this wrapped in a div - which I now know you don't have to do since they are both block level elements...I think that's right anyways.

Here's the css for just the classes li

.menu li{
	float:left;
	text-indent: -9999px;
}
.menu li a{
	display:block;
	text-decoration:none;
}

li#classes{
	background:url(images/classes.png) 0 0 no-repeat;
	width:57px;
	height:19px;
}

li#classes a:hover{
	background:url(images/classes_over.png) 0 0 no-repeat;

Like I said earlier, I'm completely new to css so be gentle. Thanks in advance

apostrophe

The first thing I notice is that you have your list items inside your anchor links - it should be the other way around.

<li id=\"classes\" title=\"classes\"><a href=\"#\">Classes</a></li>

Then in your CSS you have your background on the list item but for the hover state you have it on the link itself - they should both be on the link, thus:

li#classes a{
   background:url(images/classes.png) 0 0 no-repeat;
   width:57px;
   height:19px;
}

li#classes a:hover{
   background:url(images/classes_over.png) 0 0 no-repeat;
}

kevsyers

maaaannnn.....that's what happens when you are up all night look at code. Man thanks for your help, you're a life saver.

Your advice worked like a charm!

treehouse : what would you like to learn today?

Forums

noob nav issues