IE7 Display problem with parent & child background images

Question

I'm having a problem with IE7 displaying a table (don't worry it's used for tabular data) where the table row has a background image which repeats on the x-axis and the table division (in this case a TH) has seperate background image, which doesnt repeat at all.

Here's an example:

Here's the CSS:

<style>

table,
td,
th,
tr {
 border: none;
}

table tr {
 border-bottom: 1px solid #BEBEBE;
}

table td {
 padding: 7px;
 border-left: 1px solid #BEBEBE;
 border-right: 1px solid #BEBEBE;
}

table th {
 padding: 7px;
 text-align: left;
}

table .header {
 background-image: url(/images/layout/nav_background.png);
 background-position: top;
 background-repeat: repeat-x;
 height: 37px;
 border: none;
 margin: 2px;
}

table .header th {
 color: white;
 font-weight: normal;
 text-align: center;
}

table .header th.first {
 background-color: transparent;
 background-image: url(/images/layout/nav_left.png);
 background-repeat: no-repeat;
 background-position: top left;
}

table .header th.last {
 background-image: url(/images/layout/nav_right.png);
 background-repeat: no-repeat;
 background-position: top right;
 background-color: transparent;
}

</style>

And here's the HTML:

<table>
 <tr class="header">
  <th class="first">a</th>
  <th>b</th>
  <th class="last">a</th>
 </tr>
</table>

Please don't chastise my CSS, some of it is "spray and pray" CSS hoping something fixes it.

So I can't for the life of me figure out why I have this problem. IE8 Doesnt have this same issue.

Any ideas?

Answer 1

The first/lass classes may be overriding the tr background. Can you extend the width of your left/right pngs so that they extend to cover the entire cell?

Answer 2

If the image you posted is a screenshot of first two cells of your table, the problem is that probably first cell of second row is resizing the column. So your cell, lets call it 0x0, is being resized be the content of all cells below in the column.

We always need need to think smart if it comes to using repeated backgrounds, if I was you I'd create 2 seperate background images (check the image at the bottom of this post, I can't put it here as it breaks my code...).

Then, use these styles:

table .header {
        background:none
        height: 37px;
        border: none;
}
table .header th.first {
        background: url(/images/layout/[my-image-2].png) left no-repeat;
}

table .header th.last {
        background: url(/images/layout/[my-image-2].png) right no-repeat;
}

table .header th.middle {
        background: url(/images/layout/[my-image-1].png) repeat-x;
}

<table>
    <tr class="header">
            <th class="first">a</th>
            <th class="middle">b</th>
            <th class="last">a</th>
    </tr>
    <tr>
        <td>this cell is resizing cell above</td>
        <td>content</td>
        <td>this cell is resizing cell above</td>
    <tr>
</table>

What we are doing here is:

1. Remove background from tr element as tr does not accept backgrounds.
2. Set background no 2 to middle section and repeat it in x direction.
3. Use our background number 1 on .first cell and align it to left, and do same on .last and align to right.

If your .first and .last are longer then my example background you can simply extend the image.

This should fix your problem.

Answer 3

You need to specify your images in TDs rather than TRs accordingly and this is cross-browser.