CSS help anyone

[davecuse]

Hopefully this is something really simple that I'm just overlooking... I have my navigation in a div labeled "menu" and each link is defined as an <li> within a <ul>. Here is the html

<div id="menu">
	<ul>
		<li><a href="#">link 1</a></li>
		<li><a href="#">link 2</a></li>
		<li><a href="#">link 3</a></li>
		<li><a href="#">link 4</a></li>
		<li><a href="#">link 5</a></li>
	</ul>
</div>

My CSS looks like this

#menu {
	position: absolute;
	margin: 0px;
	padding: 0px;
	width: 100px;
	background: #000000;
	top: 105px;
}

#menu ul {
	margin: 0px;
	border-width: 0px;
	padding: 0px;
}
#menu li {
	display: list-item;
	list-style: none;
	border-width: 0px;
	width: 100px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 2px;
}
#menu li a {
	height: 20px;
	display: inline;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 2px;
}

#menu li a, a:active, a:link {
	color: #ffffff;
	font-size: 90%;
	text-decoration: none;
	font-weight: bold;
	background: #7e1e15;
}

#menu li a:hover {
	color: #ffffff;
	font-size: 90%;
	text-decoration: none;
	font-weight: bold;
	background: #b8b54d;
}

The problem: the background color for the links does not stretch the entire 100px, it just stops where the text cuts off. I can't connect to my server at the moment for some reason, but i will attach a screen shot in a few minutes

 

[Rower_CPU]

Since your background color is on the link and the width is on the <li> it makes sense that the color doesn't go the full 100px. Put the width declaration on your link block and it should be closer to what you have in mind.

 

[davecuse]

Thank you! You are correct, adding a background color to "#menu li" does make the color extend the entire 100px. Now I'm a little unsure how to make the hover color change.

PS- I can't believe I'm having so much trouble this... it could very well be due to sleep deprivation.

Edit: For some reason Grab won't let me capture the screen in Safari or Firefox, very odd

 

[Rower_CPU]

Sorry should have been clearer - by "link block" I meant "#menu li a". Set that to 100px and then change the background color on the a:hover.

 

[Mary Poppins]

Try adding

display: block;

to
#menu li a

and

#menu li a, a:active, a:link

 

[davecuse]

Thanks for the advice, I did wind up getting it to work properly, all it took was a good night's sleep.

 

[scem0]

Where do you get those? I could use one......



scem0