CSS3 PIE conflicting with :first-child

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.

score 4 · Accepted Answer · edited Oct 04 '11 at 17:12

4

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;
}

edited Oct 04 '11 at 17:12

BoltClock

700,868
160
1,392
1,356

answered Oct 04 '11 at 17:06

Gabriele Petrioli

191,379
34
261
317

Since CSS3 PIE is there anyway, maybe even enable CSS3 selectors, and use `#steps li:first-of-type` ;) – BoltClock Oct 04 '11 at 17:09
Oh, it doesn't? That sucks :( – BoltClock Oct 04 '11 at 17:17
1

@BoltClock *chuckle*.. maybe you are confusing it with [`ie-css3.js`](http://selectivizr.com/) ? – Gabriele Petrioli Oct 04 '11 at 17:20
I wasn't - I was hoping PIE would polyfill selectors too. But hey, Selectivizr looks cool. – BoltClock Oct 04 '11 at 17:23

CSS3 PIE conflicting with :first-child

1 Answers1