Vertical Navigation Question

[jobowoo]

I'm relatively new to CSS and have just been doing tutorials and looking at the source code of CSS websites.

I came across this interesting navigation:

www.jobowoo.com/test

If you look at the left side of each link there is a 4px box which is really just a left border. Here is the code in the stylesheet:

.menu { border-left:4px solid #ACB2B2; text-indent:10px; margin-bottom:2px; color:#ACABA7;font-size:12px; font-weight:bold; }


What I wanted to do was that when the link was in the hover state it would change the color of the 4px border.

So here's what I changed the code to:

.menu a { border-left:4px solid #ACB2B2; text-indent:10px; margin-bottom:2px; color:#ACABA7;font-size:12px; font-weight:bold; }
.menu a:hover { border-left:4px solid black; text-indent:10px; margin-bottom:2px; color:#ACABA7;font-size:12px; font-weight:bold; }


You can see the change here:

www.jobowoo.com/test2

But for some reason, after I made this change to the stylesheet, I somehow lose the text indent. The 4px border is directly next to the text.

Why is this? Does anyone know how to fix this? Thanks.

[NogDog]

I think you want to change "text-indent:10px" to "padding-left:10px", perhaps?

Also, for the ".menu a:hover" pseudo-class definition, you only need to enter the changes from the ".menu a" class, namely the color change.

[Jona]

Your first code affects the menu directly, while your second code only affects the links. Try this.


.menu {
text-indent:10px;
margin-bottom:2px;
color:#ACABA7;
font-size:12px;
font-weight:bold;
}
.menu a {
border-left:4px solid #ACB2B2;
}
.menu a:hover {
border-color: #000;
}

[jobowoo]

Awesome, it was the padding-left that did it.

Thanks a bunch :)