467,117 Members | 1,049 Online
Bytes | Developer Community
Ask Question

Home New Posts Topics Members FAQ

Post your question to a community of 467,117 developers. It's quick & easy.

Child Selectors in IE7

Dan
Hi,
IE 7 does not seem to like child selectors for lists. I couldn't find
anything addressing this with google search.

Example of problem--
If I want to apply the color red to all ordered list child <liitems
within unordered lists, it seems I need to do the following depending
on the browser in which I want it to work:
Firefox (works as expected): ul>ol {color:red;}

IE7 (treats ol as child of li? This is the closest I can get, but it
seems to treat child selectors as descendent selectors?): ul>li>ol
{color:red;}

Any idea what is going on here? I have the standard doctype declaration
defined on my htm file.
(<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">)

Thanks,
Dan

Jan 8 '07 #1
  • viewed: 4083
Share:
7 Replies

Dan wrote:
IE 7 does not seem to like child selectors for lists.
Works fine for me, as does FF.

The following fragments give me blue text, just as I'd expect:

ul ol { color: red; }
ul li ol {color: blue; }

[...]

<ul>
<li><ol<li>One</li</ol></li>
</ul>

I suspect you have a HTML nesting error. The following is invalid HTML
<ul>
<ol<li>One</li</ol>
</ul>

The only child of <ulmust be <li>, not <ol>. If you want to nest
them, always nest as
<ul<li<ol<li[...]

If you do have this erroneous HTML, then the error behaviour for IE and
FF is different. FF applies the CSS selectors you specified to the
literal HTML you gave it. IE appears to "fix up" the HTML into a valid
structure first, then of course the child selector now behaves as if
there were a <lithere all the time.

Both of these behaviours are allowed - the spec doesn't say what should
happen after an error, so they're both equally "correct". This is why
it's so important to have valid HTML before you start trying to debug
CSS problems with it.

Jan 8 '07 #2
Dan
Andy Dingley wrote:
I suspect you have a HTML nesting error. The following is invalid HTML
<ul>
<ol<li>One</li</ol>
</ul>
Thanks, I did have some invalid HTML which explains my problems with
nesting in IE.

However,
I can still only get this to work for IE (doesn't work in Firefox):
ul>li>ol>li {color: red;}
ol>li>ul>li {color: blue;}
example: http://writeheads.com/listsIE.htm

and this for Firefox (doesn't work in IE):
ul>li>ol>li {color: red;}
ol>li>ul>li {color: blue;}
example: http://writeheads.com/listsFF.htm

So which is supposed to work in both?

-Dan

Jan 8 '07 #3
Dan

Dan wrote:
and this for Firefox (doesn't work in IE):
ul>li>ol>li {color: red;}
ol>li>ul>li {color: blue;}
example: http://writeheads.com/listsFF.htm
Sorry, this is the correct css code I used for Firefox:
ul>ol>li {color: red;}
ol>ul>li {color: blue;}
example: http://writeheads.com/listsFF.htm

-Dan

Jan 8 '07 #4
Dan

Andy Dingley wrote:
The only child of <ulmust be <li>, not <ol>. If you want to nest
them, always nest as
<ul<li<ol<li[...]
Sorry Andy,
I skipped over this section. Looks like I am still nesting incorrectly.
I'll fix it and check out the results. Thanks!

Jan 8 '07 #5
Dan
Andy Dingley wrote:
I suspect you have a HTML nesting error. The following is invalid HTML
<ul>
<ol<li>One</li</ol>
</ul>

The only child of <ulmust be <li>, not <ol>. If you want to nest
them, always nest as
<ul<li<ol<li[...]
OK, now IE and FF are treating style almost consistently. Check it out:
www.writeheads.com/lists3.htm
www.writeheads.com/styles2.css

So I'm not sure how to get rid of the unwanted bullet applied to my
nested OL and unwanted number applied to my nested UL. Am I still
nesting incorrectly?

Thanks,
Dan

Jan 8 '07 #6
Dan wrote:
OK, now IE and FF are treating style almost consistently. Check it out:
www.writeheads.com/lists3.htm
www.writeheads.com/styles2.css

So I'm not sure how to get rid of the unwanted bullet applied to my
nested OL and unwanted number applied to my nested UL.
..liblank { list-style-type: none; }

and add the class to the <liyou don't want to show bullet or number

<li class="liblank">
<ol...
Am I still nesting incorrectly?
<http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.writeheads.co m%2Flists3.htm>

--
-bts
-Motorcycles defy gravity; cars just suck
Jan 8 '07 #7
Dan
.liblank { list-style-type: none; }

and add the class to the <liyou don't want to show bullet or number

<li class="liblank">
<ol...
Thanks for the tip. The problem, though, was that I was still nesting
incorrectly. I incorrectly closed the LI tags and started new ones to
nest the sublists. I realized I should have just left these LI items
open like so:
<ul>
<li>ul item 1</li>
<li>ul item 2
<ol>
<li>ol item 1</li>
</ol>
</li>
</ul>

Now everything seems to be working fine.

Jan 8 '07 #8

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by Tony Benham | last post: by
1 post views Thread by news.pandora.be | last post: by
18 posts views Thread by news.pandora.be | last post: by
4 posts views Thread by Harlan Messinger | last post: by
19 posts views Thread by Thomas Mlynarczyk | last post: by
2 posts views Thread by Chris Sharman | last post: by
5 posts views Thread by Nathan Sokalski | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.