views:

286

answers:

3

Hi,

UDPATE I was passing the along with an AJAX response. Seems like IE doesn't like 'new' CSS... Works fine if placed in stylesheet or initial page request...

internet explorer doesn't seem to react on classes set on tablerows. Is this correct? If so is there a workaround? Or am i doing something wrong?

<style type="text/css">
    table tr.red td {background-color:red;}
</style>
<table>
    <tr class="red">
        <td>test</td>
        <td>test</td>
    </tr>
    <tr>
        <td>test</td>
        <td>test</td>
    </tr>
</table>
+2  A: 

I don't see any reason why that shouldn't work.

Perhaps another selector has more specificity and is overwriting that style. Perhaps JS is inserting a style attribute. Perhaps your table's background is red already and you don't notice it. There are a number of reasons.

alex
i agree...this should work just fine in all browsers. My bet is that another style is conflicting.
Alex
+1  A: 

Are you using a valid doctype, or is IE attempting to render in quirks mode?

David Thomas
A: 

This is (for once) internet explorer playing the HTML game correctly. Stylesheets should only appear in the <head> of your document, so later adding them with AJAX is not valid. The best solution would be to add your rules in your main stylesheet in the head. You're probably going to know all of your styling rules in advance, so putting them in your stylesheet makes sense - don't feel like you need to miss them out because you're not using them initially.

If you really need to load in the styles with AJAX, it would be much better to use Javascript to apply them (it's ok to use Javascript in this case as you know the user has javascript as they've already gotten the content over AJAX) or inline styling (using the style attribute). jQuery provides many useful functions for dealing with CSS, so I'd have a look at that - but I would highly recommend putting all the styles in your stylesheet in the head if possible.

slightlymore