Poiple Shadow Poiple Shadow - 1 month ago 20
CSS Question

nth-child doesn't work in IE7/IE8

I cannot get the

:nth-child
selector to work with IE7/8.

Here is a working example of my code (that works in Chrome)

Below is the CSS and HTML I am using:

CSS:

#price-list {
width:98%;
padding:1%;
border:white 1px solid;
margin:0 auto;
overflow:hidden;
}
#price-list h4 {
padding-top:20px;
font-weight:400;
padding-bottom:5px;
}
#price-list ul {
width:100%;
margin-bottom:10px;
overflow:hidden;
}
#price-list li{
line-height:1.5em;
border-bottom:1px dashed #C9F;
float:left;
display:inline;
padding-top:5px;
padding-bottom:5px;
text-align:center;
}
#price-list li strong {
color:#C9F;
font-weight:normal;
}
#double-taxi li:nth-child(odd) {
width:80%;
text-align:left;
}
#double-taxi li:nth-child(even) {
width:20%;
}


HTML:

<div id="price-list">
<ul id="double-taxi">
<li><h4>North Goa</h4><strong>(Distance kms)</strong></li><li><h4>Non A/C</h4>Rs <strong>(UK &pound;)</strong></li>
<li>Aldona <strong>(10 kms)</strong></li><li>250 Rs <strong> (&pound;3)</strong></li>
<li>Asnora <strong>(15 kms)</strong></li><li>250 Rs <strong> (&pound;3)</strong></li>
<li>Bicholim <strong>(21 kms)</strong></li><li>420 Rs <strong> (&pound;5)</strong></li>
<li>Camurlim <strong>(10 kms)</strong></li><li>250 Rs <strong> (&pound;3)</strong></li>
<li>Colvale <strong>(10 kms)</strong></li><li>250 Rs <strong> (&pound;3)</strong></li>
</ul>
We DO NOT provide a taxi service. The Exchange Rate used to calculate UKP was 80Rs to the UKP and was rounded up to whole pound.
</div>


Any help would be appreciated.

Answer

That's because :nth-child isn't supported in IE7/IE8.

One solution to this problem would be to use Selectivizr.

"Selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8."

All you need to do is include the Selectivizr script and, if you aren't already using one, decide which JavaScript library you'd like to use (jQuery, Mootools etc.) and you will have support for the :nth-child selector (amongst various other pseudo-selectors/attribute selectors) in IE6 through to IE8.

Edit:

In reply to your comment, here's a quick tutorial showing you how to set up and use Selectivizr.