CODEWITHSUNDEEP
css
user3124228
user3124228

Reputation: 1

nth-child() is not working in ie8 /7

ul li:nth-child(odd){
color:#c0122f;

float:left;

width:48%; 

line-height:30px; 

font-size:15px;
}




ul li:nth-child(even){
color:#c0122f;

width:48%;

float:right; 

line-height:30px;

font-size:15px;
}

there is six li item on my page and i want give 3 shold be left side and 3 should be right side for that i have used nth-child(odd)/ even which i show in my code its working fine in chrome, mozilla and ie9 but it create a problem in ie8 /7

Upvotes: 0

Views: 363

Answers (3)

ferne97
ferne97

Reputation: 1073

As the other answers mentioned, nth child is not supported in older versions of IE. You could add fallback classes to IE versions if you add IE conditionals to your html tag. Then just do some basic jQuery to add classes.

html

<!--[if lt IE 7]>      <html lang="en-us" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html lang="en-us" class="no-js lt-ie9 lt-ie8 ie7"> <![endif]-->
<!--[if IE 8]>         <html lang="en-us" class="no-js lt-ie9 ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en-us" class="no-js"> <!--<![endif]-->

jquery

$('.lt-ie9 li:nth-child(odd)').addClass('odd');
$('.lt-ie9 li:nth-child(even)').addClass('even');

css

li.odd,
li:nth-child(odd) {
    color: #c0122f;
}

Upvotes: 0

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

Sorry nth-child aren't supported in those versions of IE. It included support for these properties later! Not in those versions.

However, here is an alternate way!

Use this script: http://selectivizr.com/ it would enable some CSS properties.

Note: You should always try to search for browser compatibility and some script which would help you use CSS in older versions of IE!

Upvotes: 0

Mister Epic
Mister Epic

Reputation: 16723

http://caniuse.com/#search=nth-child

They don't support nth-child. You'll need to implement a javascript solution for those browsers, unfortunately.

Upvotes: 1

Related Questions