hasLayout.net

Affected Versions

This bug affects: IE6

Symptoms

Child selector is ignored

Date of the Tutorial

Mon Aug 10 04:03:02 2009

Description

The bug is simple to describe: there's no support for child selector (>) in IE6:

Demo

Due to the nature of the bug, the demo is available on a separate page

HTML Code:

<div id="main">
    <div></div>
    <div>
        <div>
        </div>
    </div>
</div>

CSS Code:

div {
    width: 200px;
    padding: 50px;
    margin: 0 auto;
    background: #ddd;
}

div div {
    width: auto;
}

#main > div {
    background: #00f;
}

In IE6 the inner <div> will not be blue because we used a child selector which it doesn't support. In sane browsers, inside the blue div will see a smaller gray square, showing that the child selector only selected the child <div> and not any further descendants.

Solutions

Below are solutions for the above bug ordered by the solution type.

Solution (Clean Solution) - with Side Effects

Date of the Solution

Mon Aug 10 04:16:12 2009

Fixed Versions

All of the affected

Description

Depending on the properties you wish to apply using the child selector, incorporating this solution may be tricky. Let's glance at the fixed demo:

Due to the nature of the bug, fixed demo is available on a separate page

HTML Code:

<div id="main">
    <div></div>
    <div>
        <div>
        </div>
    </div>
</div>

CSS Code:

div {
    width: 200px;
    padding: 50px;
    margin: 0 auto;
    background: #ddd;
}

div div {
    width: auto;
}

#main div {
    background: #00f;
}
#main div div {
    background: #ddd;
}

Since we know that our descendant <div> should be of gray color, we simply used the descendant selector to set blue color on our child div, and then used a more specific (and "deeper") descendant selector to override that blue back to gray.

Clean Solution Side Effects

These are not much of side effects but rather obstacles: you have to know the value of the property to which to override the descendants of the child element. In our demo we were aware of the background color that was supposed to be set on descendants, but in some cases this may be not so obvious. If you haven't applied your property to descendant selectors - simply use that property's initial value (specs to the rescue!). Furthermore, setting display to value inline-block will cause all of the descendants to gain "layout" and setting display to another value will not cause them to lose it.

Comments

• Kevin

  Wed May 19 14:39:00 2010

  If you are interested, here is an in-depth discussion of CSS child selectors in IE6, including further elaboration of the solution mentioned here: http://craftycode.wordpress.com/2010/05/19/emulating-css-child-selectors-in-ie6/

Donate / Buy My Books

If you found materials on this site useful, please consider donating a few bucks to the author. Thank you.

Alternatively, purchase my book: