Font Color Not Applying! Please Help!!

I have created a nav bar, and applied the colour white, but only the bullets have gone white, and the actual text for the links is still black:

Code: Select all

#nav2{
position:absolute;
top:199px;
left:810px;
color:#FFFFFF;
font-weight:bold;
font-family:sans-serif}

#nav2 li{
border-bottom:1px dotted #646464;
margin-bottom:0.3em;
color:#FFFFFF}

How do I fix this annoying little thing oh great css gurus??

Thanks

If you have the text buttons linked, then you will have to create css for a:link, a:visited, a:hover, a:active.

Otherwise you won't see the changes.

It really helps to have a link (if the page is online) or at least the html code.

Try this: add a "#nav2 ul" style and designate the list items "#nav2 ul li".

Lchad is probably right - assuming you're using the LI's as links, you're inheriting the font color from the link style (probably defined in your body selector). A quick, easy way to verify this would be to use

Code: Select all

#nav2 a {
color:#fff;}

Note that you can do a lot of your link styling using the base "a" selector, but you'll need to follow it up with styling specific to each of the link states. Let me know if that's not clear and I'll post an example.

One other note: I find Firebug (runs as a Firefox add-on) indispensible for troubleshooting CSS issues. As you mouse over the code in the Firebug window, it highlights the element on the page and displays the associated CSS - including inherited properties. Makes it a whole lot easier to see what inherited properties are wreaking havoc on your intent!

#foo li a {} would be more appropriate or #foo ul li a {}

#foo li a {}
#foo li a:visited{}
#foo li a:hover {}

etc etc

__________________

I'm curious as to why you say that? A link using an li is still a child of nav2, right? Why increase the size of the css file if you don't have to?

It's easier to Identify if it's laid out that way. And the increase in file size would be negligible except on extremely large sites.

Pete.

I personally use a .nav a {}

Adding ul li in there doesn't do anything, and all the extra selectors can cause conflicts when something isn't defined quite as much. I keep it as simple as possible.

I find it easier to identify selectors that way if I'm revisiting a sheet and I've never really had any conflicts yet. It doesn't really matter which way you do it, in my eyes, as long as you are consistent.

Pete.

Yep. Sometimes when I have a really large style sheet, I'll run into a situation where changing a few properties has no effect because later or earlier on in my style sheet I have a different selector order that's overriding what I'm trying to change. Highly frustrating sometimes!