SJR59 SJR59 - 1 month ago 8
CSS Question

CSS not working in IE but works in Chrome

I am trying to alternate table row colors by odd and even rows. Seems simple and it works fine in chrome but when I test in IE nothing changes. The weirdest thing is, it originally did work in IE, but suddenly stopped and I can't get it to work again. Here is the CSS I am using. Any ideas why this wouldn't be working?

.styleIntr {
white-space: nowrap;
margin-top: 5px;
background-color: #DFF0F9;
margin-bottom: 5px;
border: 1px solid #CCC;
height: 320px;
z-index: 1;
font-size: 9pt;
color: #000;
padding-left: 50px;
padding-right: 50px;
}
.styleIntr tr:nth-child(odd) td{
background: #DFF0F9;
}
.styleIntr tr:nth-child(even) td{
background: #EFF7FB;
}


here is the HTML:

<table class="styleIntr" border="0" cellpadding="3" cellspacing="1" rules="rows" frame="hsides" align="right"
width="10%">

<TBODY><TR>
<TD style="HEIGHT: 20px"><SPAN id=Label3>Time</SPAN> </TD>
<TD style="HEIGHT: 20px"><SPAN id=Label4>Type</SPAN> </TD>
<TD style="HEIGHT: 20px"><SPAN id=Label5>Type 1</SPAN> </TD></TR>
<TR>
<TD align=center style="HEIGHT: 20px">09:00 </TD>
<TD align=center style="HEIGHT: 20px">S </TD>
<TD align=center style="HEIGHT: 20px">B </TD></TR>
<TR>
<TD colSpan=3>&nbsp; </TD></TR>
</TBODY>
</table>

Answer

You can trying to alternate table row colors by odd and even rows but your style is incorrect you have add this css to rows td. so remove td like this First Use this

<style>
   .styleIntr tr:nth-child(odd){
    background: #DFF0F9;
    }
    .styleIntr tr:nth-child(even){
    background: #EFF7FB;
    }
</style>

OR

If IE8 doesn't support the nth-child use this code

<script>
$(document).ready(function() {
    $(".styleIntr tr:nth-child(even)").addClass("even");
    $(".styleIntr tr:nth-child(odd)").addClass("odd");
});
</script>
<style>
   .styleIntr tr.odd{
    background: #DFF0F9;
    }
    .styleIntr tr.even{
    background: #EFF7FB;
    }
</style>

you can check this fiddle. https://jsfiddle.net/foku4qa3/

Comments