Question

I have this CSS style:

table.shadowed {
    border-spacing: 0px;
}

table.shadowed td {
    padding: 0px;
}

table.information {
    width: 500px;
}

table.information td.ul {
    background-image: url('img/information_bg_upper_left.png');
    background-position: bottom;
    background-repeat: no-repeat;
    width: 10px;
    height: 36px;
}

table.information td.u {
    background-image: url('img/information_bg_upper.png');
    background-position: bottom;
    background-repeat: repeat-x;
}

and this HTML code snippet:

<table class="shadowed information">
    <tr>
        <td class="ul"></td>
        <td class="u"></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

The problem with it is that for me the background for the center TD can be seen very good in Firefox, but in Chrome or Opera can not.

It’s funny, because I set repeat-x.

So have you any answer, why is this and how can I put a background for a table cell without setting a concrete size for it?

Thanks, Áron.

Answer 1

In order for the background to be visible the cell has to be populated with something like text, or have a width and a height set otherwise it’s collapsed and the background cannot be seen.