CSS selector not working

Question

I have some CSS like this:

#navBar ul
{
    list-style-type:none;
    margin:0;
    padding:0;
}

#navBar ul li
{
    border: thin dashed #ffff00;
    display:inline;
    margin:0;
    padding:0;
}

#navbar ul li a
{
    border: 1px solid #707070;
    text-decoration: none;
    padding: 0;
    margin: 0;
    background-color: #909090;
}

And HTML like this:

    <div id="navBar">
        <ul>
        <li><a href="#" >Home</a></li>
        <li><a href="#" >Services</a></li>
        <li><a href="#" >About us</a></li>
        <li><a href="#" >Blog</a></li>
        <li><a href="#" >Contact</a></li>
        </ul>
    </div>

For some reason the #navbar ul li a part is not being applied, but the #navbar ul li & #navbar ul are. I'm sure it used to work, too. And it passes w3c validation. Is it something obvious/stupid?

Answer 1

I'm not sure, but try to be case-sensitive and write

#navBar ul li a

Answer 2

As per CSS2 spec, the selectors are not case sensitive in HTML document, but are case-sensitive in XHTML documents. Your third rule spells navbar, which is different from the actual elelment name which is navBar.

In addition, some browsers actually have a bug and treat selectors as case-sensitive even if the document is delivered as HTML.