how to solve the ie 8 table row background image bug

Question

Hi,

anyone can help me solve this problem? the solution doesent work on IE 8.

in a nutshell - if you apply a background picture to a table row the background is applied to the inner cells.

thanks!

Answer 1

Add 'background-image:none' to td inside that tr.

Answer 2

To get a background image on a table row that works in IE8 (also Safari and Chrome) you have to apply a background image to the table cells of the row rather than the table row.

So, for example, taking the following table:

<table>
  <tr>
    <td class="cellFirst">First cell</td>
    <td class="cellMiddle">Middle cell</td>
    <td class="cellMiddle">Middle cell</td>
    <td class="cellLast">Last cell</td>
  </tr>
</table>

And applying the following CSS:

td.cellFirst {
  background: url('my-image.png') 0 0 no-repeat;
}

td.cellMiddle {
  background: url('my-image.png') 50% 0 no-repeat;
}

td.cellLast {
  background: url('my-image.png') 100% 0 no-repeat;
}

Would give you a 'row' with a background image. The my-image.png which is the row background is used in each of the cells.

The only thing we are doing differently is changing the background position of the image. Obviously for the first cell we start at the left, so 0. For the middle cells the image is positioned at 50%. This would hide the left hand edge of the image. And finally we position the image of the last cell at 100% which starts it from the right edge of the image.

There we go, a background image on a row.

Answer 3

Thank you!!!!! It is working lol