Forum Moderators: not2easy

Message Too Old, No Replies

IE 7 won't render my background

firefox 3.5 and IE 8 works

         

archeons

1:49 am on Aug 5, 2009 (gmt 0)

10+ Year Member



I have created something like this:
if (typeof(jQuery)!='undefined') { //check if jquery is loaded on this page
$(document).ready(function() {
$("table[stripe='true']").find("tbody > tr:odd").css("background-color", "#f2f2f2");
$("table[stripe='true']").find("tbody > tr:even").css("background-color", "#fff");
});
}

Another alternate:
if (typeof(jQuery)!='undefined') { //check if jquery is loaded on this page
$(document).ready(function() {
$("table[stripe='true'] tbody > tr:odd").addClass("odd");
$("table[stripe='true'] tbody > tr:even").addClass("even");

});
}

with putting this in my index.php
<style>
.odd { background-color: #f2f2f2; }
.even { background-color: #fff; }
</style>

the code generated in IE using the 2nd code is like this:
<TR class=even>
<TD class=date>20-03-2009</TD>
<TD><A href="#">example</A></TD>
<TD>14</TD>
<TD>3</TD>
<TD><BR></TD></TR>
<TR class=odd>
<TD class=date>24-02-2009</TD>
<TD><A href="#">example</A></TD>
<TD>20</TD>
<TD>1</TD>
<TD><BR></TD></TR>

Any idea to solve this problem?

Thank you in advance!

Cheers,
Arch

[edited by: swa66 at 2:07 am (utc) on Aug. 5, 2009]
[edit reason] examplified, removed uninteded smileys [/edit]

swa66

2:06 am on Aug 5, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Welcome to WebmasterWorld!

Setting backgrounds on a <tr> often doesn't do what one seeks, it's easier to set it on the cells themselves:


.odd td { background-color: #f2f2f2; }
.even td { background-color: #fff; }

should do the trick

archeons

2:40 am on Aug 5, 2009 (gmt 0)

10+ Year Member



Hi, Thank you for the quick reply!

I tried to do it but it does not do the trick.

Now both browsers does not render it.

archeons

2:53 am on Aug 5, 2009 (gmt 0)

10+ Year Member



<STYLE>
.odd td { background-color: #f2f2f2; }
.even td { background-color: #fff; }
</STYLE>

<TR>
<TH width="10%">Date</TH>
<TH>Title</TH>
<TH>Votes</TH><!--<th width="5%"><img src="/image/comments.png" title="Comments"></th>-->
<TH>Comments</TH>
<TH>Expiry</TH></TR></THEAD>
<TBODY>
<TR class=even>
<TD class=date>20-03-2009</TD>
<TD><A href="/poll_detail.html?poll_ident=12">foo text</A></TD>
<TD>14</TD>
<TD>3</TD>
<TD><BR></TD></TR>
<TR class=odd>
<TD class=date>24-02-2009</TD>
<TD><A href="/poll_detail.html?poll_ident=11">foo text</A></TD>
<TD>20</TD>
<TD>1</TD>
<TD><BR></TD></TR>

I am working on another server but the live one should look like <>

[edited by: SuzyUK at 9:07 am (utc) on Aug. 5, 2009]
[edit reason] No URI's thanks, & fixed scroll [/edit]

archeons

3:31 am on Aug 5, 2009 (gmt 0)

10+ Year Member



I fixed the problem by adding
{ position: relative; }

This is a very nice website that tells IE CSS bugs:
[positioniseverything.net...]

tangor

6:56 am on Aug 5, 2009 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Interesting. How does it work in Javascript DISABLED browsers?

(Me and about 10%+ on the web...)