By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
445,771 Members | 1,741 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 445,771 IT Pros & Developers. It's quick & easy.

Styling Nested Lists Using IE

P: n/a
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

Jul 20 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a
*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)
Jul 20 '05 #2

P: n/a
John Topley wrote:
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.


li {}
li li {}

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.

--
Brian (remove ".invalid" to email me)
http://www.tsmchughs.com/
Jul 20 '05 #3

P: n/a
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
Jul 20 '05 #4

P: n/a
"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/
Jul 20 '05 #5

P: n/a
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
Jul 20 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.