Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

IE8 breaks when using two selectors?

I'm styling a table using CSS and I realised that IE8 doesn't support :nth-child

So before I added support for IE8, the css looked like so

.my-comments table.comments-list tr td:nth-child(1){width:18%;}

Then I added another selector like so

.my-comments table.comments-list tr td:nth-child(1), .my-comments table.comments-list tr .datecol{width:18%;}

IE8 doesn't like this, it wont recognise the 2nd selector but if I take out the first one like below then it works

.my-comments table.comments-list tr .datecol{width:18%;}

Any ideas how to fix this?

Obviously I could just use the above code but I'd like to leave in both selectors for future browsers

like image 479
Sean H Jenkins Avatar asked Dec 31 '11 14:12

Sean H Jenkins


3 Answers

I would try making the style separately (without the comma). IE8 is probably not recognizing the :nth child and skipping the declaration.

like image 94
Gregg B Avatar answered Nov 12 '22 13:11

Gregg B


If you would still like your nth-child(1) style to work in IE8 (with out having to add the .datecol class) you could change your CSS to the following:

.my-comments table.comments-list tr td:first-child + td {
    width:18%;
}

The above code would target the second td - which is what I believe you are aiming to do with nth-child(1) and is support across a wider range of browsers.

like image 4
My Head Hurts Avatar answered Nov 12 '22 13:11

My Head Hurts


I feel like I'm missing something here. Can't you just separate them into 2 different lines?

.my-comments table.comments-list tr td:nth-child(1){width:18%;}
.my-comments table.comments-list tr .datecol{width:18%;}
like image 2
Different55 Avatar answered Nov 12 '22 14:11

Different55