Tuesday, April 5, 2011

CSS background images not showing in IE?

In IE8 and below, I'm doing this

<ul class="dependants_list" style="border-bottom: dashed 1px #53a1dc">

     <li class="dependants_summary">
     <strong>Name:</strong> De Silva, Angelina<br />
     <strong>Gender:</strong> Female<br />
     <strong>Date of birth:</strong> 7/3/2009<br />
    </li>
    <form action="/Dependant/Delete/11413" method="get"><input class="delete btn" id="Delete_this_Profile" name="Delete_this_Profile" type="submit" value="Delete this Profile" />
     </form><form action="/Dependant/Edit/11413" method="get"><input class="edit btn" id="Modify_this_Profile" name="Modify_this_Profile" type="submit" value="Modify this Profile" />
     </form><br /><hr style="display:none" />

and the CSS for it is:

.dependants_summary 
{
    overflow: hidden;
    margin-bottom: 10px;
    padding-right: 0px;
    padding-left: 85px;
    padding-top: 5px;
    padding-bottom: 5px;
    width: 430px;
    float: left;
    font: 120% Arial, Helvetica, sans-serif;
}
.dependants_list
{
    padding: 0;
}
.dependants_list li:nth-child(odd) {
    background: #fff url("../images/dependant_male.png") no-repeat scroll 8px 9px;
}
.dependants_list li:nth-child(even) {
    background: #c9e3f4 url("../images/dependant_male.png") no-repeat scroll 8px 9px;
}

The images are not being shown in IE, but they are in ffox and chrome

From stackoverflow
  • nth-child selectors arent supported by IE unfortunately

  • nth-child is not supported at all in Internet Explorer.

    I think you won't get around numbering the elements manually (i.e. adding classes to them that specify the correct colouring.)

    Kyle Sevenoaks : Someone should send that table to MS and ask why they're so slow.
    bobince : To be fair, other browsers have trouble with this selector too, and MS have it in IE9.
    Kyle Sevenoaks : That's true, I was commenting on the amount of red blocks under the MS name in that table :)
    Kevin : ah fudge. Any ideas for a workaround?
    Pekka : @Kevin just assign classes (`.row-even` `.row-odd`...) I'm sure there's a jquery workaround but then again, that won't work with JS turned off. Better go with classes.

0 comments:

Post a Comment