Stylesheets - Styling Nested Lists Using IE

Author

Styling Nested Lists Using IE

John Topley

2004-08-22, 7:14 am

Hi,

I'm doing some work in an intranet environment where I'm forced to use
IE 6.0. Is it possible to style (unordered) nested lists so that the
inner list items have a different appearance to the outer list items? I
can't get it to work using descendant selectors.

Thanks in advance,

John

Andrew Urquhart

2004-08-22, 7:14 am

*John Topley* wrote:
> Hi,

Hi

> I'm doing some work in an intranet environment where I'm forced to use
> IE 6.0. Is it possible to style (unordered) nested lists so that the
> inner list items have a different appearance to the outer list items?
> I can't get it to work using descendant selectors.

#mylist ul {
font-style: italic;
}
#mylist ul ul {
font-weight: bold;
}

<ul id="mylist">
<li>Biscuits
<ul>
<li>Rich Tea</li>
<li>Bourbon</li>
<li>Digestive
<ul>
<li>Plain</li>
<li>Milk Chocolate</li>
<li>Dark Chocolate</li>
</ul>
</li>
<li>Custard Creme</li>
</ul>
</li>
<li>Fish</li>
<li>Wildebeast</li>
</ul>
--
Andrew Urquhart
- FAQ: http://www.css.nu/faq/ciwas-aFAQ.html
- Archive: http://tinyurl.com/ysjbm (Google Groups)
- Contact me: http://andrewu.co.uk/contact/
- This post is probably time-stamped +1 hour - blame my ISP (NTL)

John Topley

2004-08-22, 7:17 pm

Brian wrote:
> I'm guessing that you tried this. What problems were you having? You
> may need to post a dummy page in a public place for us to see.

Thanks, still no luck though. See
http://www.johntopley.com/development/lists.html - it's the #menu part.
I think it might be something to do with the fact that I'm styling my
outer list with an image.

John

Jukka K. Korpela

2004-08-22, 7:17 pm

"John Topley" <john@$NO_SPAM$topley.freeserve.co.uk> wrote:

> http://www.johntopley.com/development/lists.html - it's the #menu part.

OK, now we are getting at something. It helps to know the facts of the
case.

> I think it might be something to do with the fact that I'm styling my
> outer list with an image.

Nope.

It's a cascade issue. First, you have

/* Doesn't work? */
#menu ul ul li {
font-weight: normal;
}

And it really doesn't work - for any <a> element, no matter how nested
inside other elements, if there is _any_ style sheet that assigns a
font-weight value to it.

Second, changing the selector to

#menu ul ul li a

is not sufficient. By the cascade rules, it has specificity (0,1,0,4), so
it loses to a rule like

#menu li a:visited {
color: #000;
font-weight: bold;
text-decoration: none;
}

where the selector has specificity (0,1,1,2), which is greater. The key
is the pseudoclass selector :visited (or :link or whatever applies),
which contributes to the third component in the specificity. Using the
selector

#menu ul ul li a:visited

would help, and so would !important. But your sample is too sketchy - you
are not really going to make the mistake #1 of setting unvisited and
visited links similar, are you? - to allow a specific (no pun intended)
constructive suggestion.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

John Topley

2004-08-22, 7:17 pm

Jukka K. Korpela wrote:
> #menu ul ul li a:visited
>
> would help, and so would !important. But your sample is too sketchy -
> you are not really going to make the mistake #1 of setting unvisited
> and visited links similar, are you? - to allow a specific (no pun
> intended) constructive suggestion.

Thanks, that did the trick. And you're right, I shouldn't make that
mistake.

Regards,

John

John Topley

2004-08-26, 12:28 pm