CODEWITHSUNDEEP
htmlcss
Positonic
Positonic

Reputation: 9411

Descendant selector not working in Internet explorer 9

With this markup:

    <div id="shopNav">
        <ul>
            <li class="active">
                <a href="#">test 1</a></li>

        </ul>
    </div>  
    <ul>
        <li class="active1"><a href="#">test</a></li>

    </ul>

This doesn't work

#shopnav li.active {
    border:1px solid red !important;    
}

but:

.active {border:1px solid red !important;}

does work.

I get different behaviours with different doc types: with

<!DOCTYPE PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

The first one is highlighted in FF and not ie8 and with:

The behaviour is consistant, in that only the second li is given the style.

I don't understand this at all as I feel like I've been using this sort of selector for ages... Why doesn't the first selector it work in IE9? And why doesn't the first selector work in either with the loose.dtd ?

See it in action on this page

Upvotes: 1

Views: 71

Answers (2)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201538

The id attribute values are case sensitive. When you have id="shopNav", then in CSS you need to use #shopNav, not #shopnav.

Upvotes: 3

LorDex
LorDex

Reputation: 2636

use this:

#shopnav ul li.active

or this

#shopnav * li.active

Upvotes: 0

Related Questions