li tag style not working

[menkes]

CSS is NOT my strong point, but I need to get this template working. I use PHP and a database to dynamically generate a navigation menu. Although I 'know' which page the user is on, I cannot seem to make my list item display correctly.

Here is an example of the generated HTML:

<div id='topmenu' class='menu1'>
<ul>
<li class='current'><a href='file.php'>Home</a></li>
<li><a href='file2.php'>Blog</a></li>
</ul>
</div>

And here is the CSS:

.menu1{
font: bold 12px Verdana;
}

.menu1 ul{
z-index:100;
margin: 0;
padding: 0;
list-style-type: none;
}

.menu1 ul li{
position: relative;
display: inline;
float: left;
}

.menu1 ul li a{
display: block;
background: #5b717d;
padding: 8px 10px;
border-right: 2px solid #ccd6df;
color: #db6b10;
text-decoration: none;
}

* html .menu1 ul li a{
display: inline-block;
}

.menu1 ul li a:link, .menu1 ul li a:visited{
color: white;
}

.menu1 ul li a.selected{
background: black; 
color: white;
}

.menu1 ul li a:hover{
background: black; 
color: white;
}

.menu1 ul li ul{
position: absolute;
left: 0;
display: none; 
visibility: hidden;
}

.menu1 ul li ul li{
display: list-item;
float: none;
}

.menu1 ul li ul li ul{
top: 0;
}

.menu1 ul li ul li a{
font: normal 13px Verdana;
width: 160px; 
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.current{
font: normal 14px Arial;
background-color: blue;
color: db6b10;
}

Appreciate any insight that may help.

 

[Vragabond]

This could be due to specificity. That is, your .current style is overwritten by something that is more specific. Installing Firebug on Firefox can be a handy tool to see which rule is the most specific one for certain elements.

Other issues:

1. You have no hash sign for the color of .current element, thus that will be ignored.
2. Your anchor elements cover the entire li element, thus you should not be seeing any background color on li elements, which is what your current applies to.
3. You are very inconsistent with where you define your fonts and how you define them. Do you really want to have a different typeface for the current option?



[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[BillyRayPreachersSon]

Also, why don't you indent your CSS - it would make it far easier to read, IMHO.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[menkes]

Thanks for the responses.

I know the code is a bit sloppy...but I was testing some things out.

Thanks to Vragabond I realized that using the li tag for the class was wrong. I needed to inherit from the base class for the div (that being .menu1) and place the style in the correct hierarchy. Which was actully there all along:

.menu1 ul li a.selected{
    background: black; 
    color: white;
}
[code]

So by changing those values and adding class='selected' to the appropriate anchor tag, problem solved.

Thanks again for the help.

 

[Vragabond]

You could've kept the class on li as well, just change the CSS:

.menu1 ul li.selected a {
 ...
}

However, I do urge you to read up on specificity, since that is what I think you refer to as "correct hierarchy". Knowing exactly how that works would be very beneficial for this and future projects, especially when your code will get more complex.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[ChrisHunt]

This is a fun approach to specificity:

http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd