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