CODEWITHSUNDEEP
internet-explorercsscss-selectors
Poiple Shadow
Poiple Shadow

Reputation: 195

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.

Upvotes: 6

Views: 17214

Answers (3)

Khizer Najeeb
Khizer Najeeb

Reputation: 507

Below example may be helpful for you

//For first child
// equivalent to li:nth-child(1)
li:first-child a {
    border-top: 5px solid red;
}

//For second child
// equivalent to li:nth-child(2)
li:first-child + li a {
    border-top: 5px solid blue;
}

//For third child
// equivalent to li:nth-child(3)
 li:first-child + li + li a {
    border-top: 5px solid green;
}​

Upvotes: 7

Michael Durrant
Michael Durrant

Reputation: 96454

Use a polyfill such as selectivizer for the missing functionality.

  1. Download it from selectivizr.com at http://selectivizr.com/downloads/selectivizr-1.0.2.zip
  2. Unzip it and put the file in in your project under app/assets/javascripts
  3. Reference it in your app for ie only with <!--[if (gte IE 6)&(lte IE 8)]><script type="text/javascript" src="selectivizr-min.js"></script><![endif]--> in your layout's application.js file. or...

  4. For the asset pipeline you can add gem 'selectivizr-rails' to our Gemfile and then bundle install. You get the gem from https://github.com/jhubert/selectivizr-rails

    Then add the following to the head tag in your layout:

    <!--[if (gte IE 6)&(lte IE 8)]> = javascript_include_tag 'selectivizr' <![endif]-->

  5. proceed as normal

Upvotes: 0

dsgriffin
dsgriffin

Reputation: 68576

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.

Upvotes: 9

Related Questions