By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,319 Members | 2,361 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,319 IT Pros & Developers. It's quick & easy.

<tr> background

P: n/a
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

Jul 21 '05 #1
Share this Question
Share on Google+
5 Replies


P: n/a
Thierry Schembri:
the <tr> has a background image, but the background repeats in each <td>


Please provide code.

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

should work.
Jul 21 '05 #2

P: n/a
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 ?
Jul 21 '05 #3

P: n/a

"Thierry Schembri" <ts*******@hydromail.net> wrote in message
news:42***********************@news.wanadoo.fr...
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 ?


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>
Jul 21 '05 #4

P: n/a
Thierry Schembri napisa³(a):
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).


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
Jul 21 '05 #5

P: n/a
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...
Jul 21 '05 #6

This discussion thread is closed

Replies have been disabled for this discussion.