Need the CSS a.tag is not cooperating

Question

This site is turning into a mess. I can't seem to get the left side navigation to look the way I want.

I think it's something simple but I can't see it.

this is the CSS:

a.col1:link {color:#FFF}      /* unvisited link */
a.col1:visited {color:#00F}  /* visited link */
a.col1:hover {color:#FF0}  /* mouse over link */
a.col1:active {color:#00F}  /* selected link */

here is the html:

<ul class="col1"><li><a href="see_autos.asp>car</a></li></ul>

Answer 1

You need to apply the styles of the CSS pseudo-class directly to the A tags themselves. As you show, they are descendants of the UL LI tags in your structure, so that's how you can select them.

ul.col1 li a:link {color:#FFF}      /* unvisited link */
ul.col1 li a:visited {color:#00F}  /* visited link */
ul.col1 li a:hover {color:#FF0}  /* mouse over link */
ul.col1 li a:active {color:#00F}  /* selected link */

Answer 2

First you need a " to end your href.

Second, your class is not on your a, it is on the parent, so your css should be something like

.col1 a:link {color:#FFF}

Third, please don't name it col1, a semantic name is better left-nav or sidebar is better.

Answer 3

Your CSS expects the col1 to be a class of the <a> element. But you have assigned it to the <ul> element. So to fix this you need to change HTML as follows

<ul><li><a href="see_autos.asp" class="col1">car</a></li></ul>

so that it is assigned to the right element, or to change CSS as follows

ul.col1 a:link {color:#FFF}      /* unvisited link */
ul.col1 a:visited {color:#00F}  /* visited link */
ul.col1 a:hover {color:#FF0}  /* mouse over link */
ul.col1 a:active {color:#00F}  /* selected link */

so that it is assigned to any child <a> elements of the <ul class="col1"> element.

Answer 4

Since the anchor is a child of the unordered list, your css should specify child anchors of the unordered list as such:

.col1 a:link
{
    color...
}