CODEWITHSUNDEEP
htmlcssinternet-explorer
SJR59
SJR59

Reputation: 83

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>

Upvotes: 2

Views: 8341

Answers (1)

Milan Gajjar
Milan Gajjar

Reputation: 701

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/

If IE does not support then use this one.

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

Upvotes: 2

Related Questions