<tr> background

#1 July 21st, 2005, 02:00 AM

Hi !

I'm facing problems with a background image in a table (with IE & Opera), it
works with FF :
the <tr> has a background image, but the background repeats in each <td>

ex :

tr background -> "this is the background"

instead of displaying :

<td>this is</td><td>the backgroud</td>

it displays :

<td>this is</td></td>this is</td>

Is there a workaround to avoid this problem ?

Thanks in advance

#2 July 21st, 2005, 02:00 AM

Thierry Schembri:[color=blue]
> the <tr> has a background image, but the background repeats in each <td>[/color]

Please provide code.

tr {background-image: url(foo.bar)}

should work.

#3 July 21st, 2005, 02:00 AM

Hello, here is the code :

<style>

table.tb tr
{
background: url(mid.gif') repeat-y;
}

</style>

</head>
<body>
<table class="tb">
<tr><td>cell 1</td><td>cell 2</td><td>cell 3</td></tr>
</table>

simple isn't it ?

The 'mid.gif' image is an image for the background of each line of the
table.
It works as supposed with Firefox, but with IE and Opera, the image is
repeating for each cell (and if I add : table.tb td
{background:transparent}, there's no background at all with IE & Opera).

Do you see what I mean ?

#4 July 21st, 2005, 02:00 AM

"Thierry Schembri" <tschembri@hydromail.net> wrote in message
news:42aef07d$0$11685$8fcfb975@news.wanadoo.fr...[color=blue]
> Hello, here is the code :
>
> <style>
>
> table.tb tr
> {
> background: url(mid.gif') repeat-y;
> }
>
> </style>
>
> </head>
> <body>
> <table class="tb">
> <tr><td>cell 1</td><td>cell 2</td><td>cell 3</td></tr>
> </table>
>
> simple isn't it ?
>
> The 'mid.gif' image is an image for the background of each line of the
> table.
> It works as supposed with Firefox, but with IE and Opera, the image is
> repeating for each cell (and if I add : table.tb td
> {background:transparent}, there's no background at all with IE & Opera).
>
> Do you see what I mean ?
>
>[/color]

could you not assign a class to the first cell of each row?

table.tb td.pic
{
background: url(mid.gif) repeat-y;
}

<table class="tb">
<tr><td class="pic">cell 1</td><td>cell 2</td><td>cell 3</td></tr>
<tr><td class="pic">cell 4</td><td>cell 5</td><td>cell 6</td></tr>
</table>

#5 July 21st, 2005, 02:00 AM

Thierry Schembri napisa³(a):[color=blue]
> Hello, here is the code :
>
> <style>
>
> table.tb tr
> {
> background: url(mid.gif') repeat-y;
> }
>
> </style>
>
> </head>
> <body>
> <table class="tb">
> <tr><td>cell 1</td><td>cell 2</td><td>cell 3</td></tr>
> </table>
>
> simple isn't it ?
>
> The 'mid.gif' image is an image for the background of each line of the
> table.
> It works as supposed with Firefox, but with IE and Opera, the image is
> repeating for each cell (and if I add : table.tb td
> {background:transparent}, there's no background at all with IE & Opera).[/color]

try
table.tb tr td {
background: transparent none;
}

AFAIR CSS spec. says that background-color may be set to "transparent",
but background-image to "none".

--
Janusz 'Kali' Kaliszczak
+ pies rasy *jumnik*
=> http://www.deviantart.com/view/18982956/ <= GG#52055

#6 July 21st, 2005, 02:01 AM

interesting ... and strange

with <td> background-image set to none :

firefox : cells use correctly the <tr> background without repeating the
image
opera : each cell repeats the <tr> background
ie : no background at all

mmm I just wanted to use css instead of old methods with tables layouts. I
realize it's really difficult to make such trivial things with so limited
features & so uncompatible browsers...

<tr> background

Popular Articles

What is Bytes?