IE Background Bug

[LegosJedi]

Okay, I'm making a MyBB theme and, for some reason, the background is repeated in every td in IE, though it displays fine in FF.

 

Theme in IE:

 

 

Theme in FF:

 

 

Here's my HTML Code for the section:

 

<tr class="tcat">
<td width="35"> </td>
<td><strong>Forum</strong></td>
<td style="white-space: nowrap;" align="center" width="85"><strong>Threads</strong></td>
<td style="white-space: nowrap;" align="center" width="85"><strong>Posts</strong></td>
<td align="center" width="200"><strong>Last Post</strong></td>
</tr>

 

And here's the CSS Code:

 

.tcat {
background: #ffffff url(wii/forum.gif) top left no-repeat;
color: #000000;
font-size: 12px;
height: 29px;
}

 

Anyone know how I can make IE display like FF?

[ryanh_106]

The problem is each TD in the row should inherit the style associated to the row, so in my opinion the way that code is written should create the effect displayed in IE.

 

Im just guessing here as I have never tried this myself but I would suggest changing the css to read tr.tcat { blah } as this should only apply to the row, not the cells within??

 

who knows, give it a try, hope it helps

 

Ryan

[obsidian]

The issue is that IE doesn't like to display things on table rows themselves. It applies the assignment to the individual table cells within it, which is obviously not the desired effect you are after. I don't know what your image is that you are attempting to use, but you'll notice that most forums use only vertical gradients in their tables for this very reason. You cannot get a uniform look very easily and still allow for flexible sizing of the content in all browsers.

 

The only other way around it is very sloppy markup, but it would work for your visual. every row would have to be contained within a TD or DIV tag as its own table. That way, you could have the background image applied to the parent TD or DIV tag rather than to the TR tag alone.

 

Another solution you may wish to try is setting your actual TD elements within the TR in question to none:

tr.tcat {
background: #ffffff url(wii/forum.gif) top left no-repeat;
color: #000000;
font-size: 12px;
height: 29px;
}

tr.tcat td {
background: none;
}

 

Hope this helps some