Second CSS class not working in IE8.

Question

I have the following div being rendered to the client, but on IE, the checked-yes class is ignored. If I view the target element in the 'Developer Tools', that class is completely missing from the Style panel. The shift-item-present class is attached server side, and the checked-yes class client side, depending on the present attribute of the parent row, also shown below.

<td><div class="shift-item-present checked-yes" jQuery1272958392665="94"/></td>

Parent row:

<tr class="shift-item" id="ctl00_mainContentPlaceHolder_ctl00_shiftList_ctl01_shiftRow" present="True" shift-id="641" jQuery1272958392665="64">

The page works perfectly in FF. Here is the CSS, both in the same file:

.shift-item-present
{
    top: 2px;
    left: 2px;
    height: 12px;
    width: 20px;
    background-repeat: no-repeat;
    background-position: center right;
}

.checked-yes
{
    background-image: url('../Images/Icons/checked-yes-xs.png');
}

Answer 1

This may happen when IE8 renders the page in Quirks mode. Try to set a correct DOCTYPE.

Answer 2

Internet Explorer does not support XHTML! Not even IE8. So it doesn't support self-closing elements. Use <div></div> not <div/>.

Answer 3

According to your styles, you don't set the width of the child and elements Try to set it manually - may be background are rendered, but can't be viewed as not wide enough.

If you can post the .shift-item class, we can proceed for your question more effectivelly. May be there is a directive about background:none or something like that.