Question

I’m using CSS3 PIE to add suppport for border-radius to IE8 and earlier, and it’s conflicting with a :first-child selector.

Basically, I have three list items floated left. Each one has a left margin of 10px, except for the first one, which I set to 0:

#steps li {
    border-radius: 10px;
    float: left;
    margin-left: 10px;
}
#steps li:first-child {
    margin-left: 0;
}

When I apply PIE to the #steps li selector to add support for border-radius, the first list item is redrawn with the left margin set back to 10px, as if the #steps li:first-child selector isn’t there. I can tell it’s due to PIE redrawing the element, because it briefly flashes in the correct position and then shifts over 10px a split second later.

I’ve tried applying PIE to both selectors, but that doesn’t make a difference, and I’m unable to find anything pertaining to first-child on the PIE support forums.

Answer 1

Have a look at the official forum over at CSS3 PIE Forums – IE :first/last-child overwritten

The end result is that you need to add

#steps css3-container:first-child + li, 
#steps li:first-child {
    margin-left: 0;
}