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

Subscribe Post Reply

4277

Andy Dingley

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

Beauregard T. Shagnasty

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

Similar topics

Id v Class Selectors

by: Tony Benham | last post by:

I have been getting to grips with css recently (very slowly), and one area I have a problem is when to use class selectors or id selectors. Are there any guidelines when to use each type ? The key...

HTML / CSS

first-child doesn't work in Internet Explorer 6?

by: Veerle | last post by:

Hi, Somewhere in my html page, I have the following code: <div id="main-body"> <h2>Header text</h2> <p>Some other text ...</p> ..... <h2>Another header text</h2> <p>Some more other text...

HTML / CSS

Realy stuck on child selectors :(

by: news.pandora.be | last post by:

I tried everything. I even tested it in combination with opera and mozilla. (I use IE 6 mostly) It's reduced to the simple example below. Please tell me what is wrong with my understaning of...

HTML / CSS

Child selectors? I dont get it :(

by: news.pandora.be | last post by:

I tried everything. I even tested it in combination with opera and mozilla. (I use IE 6 mostly) It's reduced to the simple example below. Please tell me what is wrong with my understaning of...

HTML / CSS

Inconsistent application of child selection operator

by: Harlan Messinger | last post by:

At http://www.gavelcade.com/tests/partial-child-recognition.html is an illustration of an apparent inconsistency in the way the child selection operator > is handled with respect to tables, rows,...

HTML / CSS

Child's top margin and parent's background

by: Thomas Mlynarczyk | last post by:

Hello, The following gives different results in IE and "Non-IE" browsers: <div style="background-color: green; width: 200px"> <div style="margin-top: 20px; background-color: red"> Hello...

HTML / CSS

child selector not working on ie ?

by: Chris Sharman | last post by:

See http://services.ccagroup.co.uk/testform.htm Looks as intended in firefox, is valid (bulk of inputs centred in a div occupying the left half of the page). ie ignores the child selector,...

HTML / CSS

IE7 attribute and child selector support

by: Jeff | last post by:

Does IE7 support attribute and child selectors? Jeff

HTML / CSS

Adjacent Sibling Selectors in CSS

by: Nathan Sokalski | last post by:

I'm not sure if this is the right place to ask this question, but I wasn't sure where else to go. I have a table made of the following tags: <table class="myclass"> <tbody> <tr><td>.</td></tr>...

ASP.NET

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

C# / C Sharp