TR background versus TABLE

[Giggle Girl]

Hi there,
I need to use a background image in a TR that does NOT restart
everytime it hits a TD. Can it be done?

Specifically, if you set a background image for an entier table, now
mater how many TRs and TDs you have, it will show the
complete/unfragmented image (as long as you don't over-ride it).

When I set a TR background image, every time I hit a TD it "re-seeds"
the image. I want to have a TR that shows an 800px image in it's
entirety, not a fragmented one.

Is this possible?

Ann
PS: I am aware of an "old school" hack, where I can nest tables, making
a new table in a TD that has the background I desire, but this is very
inelegant methinks.

[Mitja Trampus]

Giggle Girl wrote:

Hi there,
I need to use a background image in a TR that does NOT restart
everytime it hits a TD. Can it be done?

PS: I am aware of an "old school" hack, where I can nest tables, making
a new table in a TD that has the background I desire, but this is very
inelegant methinks.

I'm afraid that's more or less what you're stuck with - CSS
can't do that, AFAIK.
To make it a touch more elegant, use an enclosing div
instead of an enclosing table.

[Jonathan N. Little]

Giggle Girl wrote:

Hi there,
I need to use a background image in a TR that does NOT restart
everytime it hits a TD. Can it be done?

Specifically, if you set a background image for an entier table, now
mater how many TRs and TDs you have, it will show the
complete/unfragmented image (as long as you don't over-ride it).

When I set a TR background image, every time I hit a TD it "re-seeds"
the image. I want to have a TR that shows an 800px image in it's
entirety, not a fragmented one.

Is this possible?

Ann
PS: I am aware of an "old school" hack, where I can nest tables, making
a new table in a TD that has the background I desire, but this is very
inelegant methinks.

Which browser are you using?

TABLE
{
background-image: url(somebigimage.jpg); width: 800px; height: 600px;
}

TD
{
background-image: none;
}

Works in Mozilla 1.7x, Opera 7.4 MSIE 4-6 NN7.x Does work in old NN4.x
but not much does...

Also works when applied to TR but not sure how kosher, seems to display
same as when applied to TABLE element and is not confined to TR

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Alan J. Flavell]

On Tue, 8 Nov 2005, Jonathan N. Little wrote:

Giggle Girl wrote:

When I set a TR background image, every time I hit a TD it "re-seeds"
the image. I want to have a TR that shows an 800px image in it's
entirety, not a fragmented one.

[...] Also works when applied to TR but not sure how kosher, seems to
display same as when applied to TABLE element and is not confined to
TR

Yes, it produces the desired effect in Mozilla. But, curiously, not
in Opera, where the image is restarted in each cell.

There's a crudely-made test document, for the time being, at
http://ppewww.ph.gla.ac.uk/~flavell/tests/tablebg.html
in which table rows 2, 3 and 5 are supposed to show the effect.

That it doesn't produce the desired result in MSIE came as no great
surprise, but the fact that Opera does the same as MSIE makes me start
to wonder whether this is even *supposed* to work. And yet, I haven't
found anything in the specifications against styling a table row and
expecting it to work consistently?

I wonder whether there are any values of background-position and/or
background-attach which would persuade reluctant browsers to do what's
wanted? Haven't found any suitable value(s) yet, though.

regards

[Jonathan N. Little]

Alan J. Flavell wrote:

On Tue, 8 Nov 2005, Jonathan N. Little wrote:

Giggle Girl wrote:

When I set a TR background image, every time I hit a TD it "re-seeds"
the image. I want to have a TR that shows an 800px image in it's
entirety, not a fragmented one.

[...]

Also works when applied to TR but not sure how kosher, seems to
display same as when applied to TABLE element and is not confined to
TR

Yes, it produces the desired effect in Mozilla. But, curiously, not
in Opera, where the image is restarted in each cell.

There's a crudely-made test document, for the time being, at
http://ppewww.ph.gla.ac.uk/~flavell/tests/tablebg.html
in which table rows 2, 3 and 5 are supposed to show the effect.

That it doesn't produce the desired result in MSIE came as no great
surprise, but the fact that Opera does the same as MSIE makes me start
to wonder whether this is even *supposed* to work. And yet, I haven't
found anything in the specifications against styling a table row and
expecting it to work consistently?

I wonder whether there are any values of background-position and/or
background-attach which would persuade reluctant browsers to do what's
wanted? Haven't found any suitable value(s) yet, though.

Applied to TR works in Gecko, but if you apply background-image to TABLE
works in the three. The TR element can take a STYLE parameter so I
assume it should work and therefore Gecko would be correct.

Now if you apply the background-image to TABLE you can blank it out
non-header row by have a class with a flat color image for the background,

TABLE { background-image: url(splash.jpg); }
TR.mydata {background-image: url(justwhite.gif); }

<table>
<tr><th>flashy header</th><th>more header</th></tr>
<tr><td class="mydata"> 123.4</td> class="mydata"> 567.8</td></tr>
....

But I bet the OP real purpose if a table layout where he would be better
served using DIVs and a more flexible layout....

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Travis Newbury]

Alan J. Flavell wrote:

Yes, it produces the desired effect in Mozilla. But, curiously, not
in Opera, where the image is restarted in each cell.

Sucks to be one of the 14 opera users out there.... (0_o)

--
-=tn=-

[Alan J. Flavell]

On Tue, 8 Nov 2005, Jonathan N. Little wrote:

Applied to TR works in Gecko, but if you apply background-image to
TABLE works in the three.
Sure; but you don't then have the option to use different images
on different rows.
The TR element can take a STYLE parameter
so I assume it should work and therefore Gecko would be correct.
But we don't have a clear definition of "work". It *does* use the
image as a background - but Opera and MSIE aren't using the image in
the way that the O.P would like.
Now if you apply the background-image to TABLE you can blank it out
non-header row by have a class with a flat color image for the
background,
Sure; but specifying a colour and no image would surely be as
effective?
But I bet the OP real purpose if a table layout where he would be
better served using DIVs and a more flexible layout....

Certainly a URL would have been useful, as always. Which is why I
made one myself, in the hope that the O.P would at least challenge it
- possibly even produce one which showed what they really meant.

cheers

[Jonathan N. Little]

Alan J. Flavell wrote:

On Tue, 8 Nov 2005, Jonathan N. Little wrote:

Applied to TR works in Gecko, but if you apply background-image to
TABLE works in the three.

Sure; but you don't then have the option to use different images
on different rows.

The TR element can take a STYLE parameter
so I assume it should work and therefore Gecko would be correct.

But we don't have a clear definition of "work". It *does* use the
image as a background - but Opera and MSIE aren't using the image in
the way that the O.P would like.

I would argue that Opera and MSIE behavior is incorrect, because the
image is applied to the containing element TR and if child elements TD
have no background-image defined (since initial is supposed to be
'none') the TR background-image should show through undisturbed. Opera
and MSIE are displaying 'inherit' behavior which is incorrect. This is
akin to applying a background-image to the BODY, child P's with no
background-image specified should not inherit the background-image but
let the image show through undisturbed, right?

Now if you apply the background-image to TABLE you can blank it out
non-header row by have a class with a flat color image for the
background,

Sure; but specifying a colour and no image would surely be as
effective?

background-color, yes; background-image, no.
background-image: none' means no image for element so what's beneath
shows through, it does not mean erase image

But I bet the OP real purpose if a table layout where he would be
better served using DIVs and a more flexible layout....

Certainly a URL would have been useful, as always. Which is why I
made one myself, in the hope that the O.P would at least challenge it
- possibly even produce one which showed what they really meant.

A very common problem, it is always more helpful if we do not have to
divine the OP's intentions!

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Alan J. Flavell]

On Tue, 8 Nov 2005, Jonathan N. Little wrote, quoting me:

I would argue that Opera and MSIE behavior is incorrect,
To be honest with you, so would I. But I was reluctant to leap to
conclusions without pausing to see whether I was perhaps missing
something.
Opera and MSIE are displaying 'inherit' behavior
Nicely put. Indeed, if Mozilla is told to apply "inherit" to the
td style, then its behaviour is the same as Opera and MSIE.
which is incorrect.

Right - the defaults for the td are specified to be color transparent,
and background image none.

The problem, I feel sure, is that <tr> is somehow being processed as a
special kind of object, which never actually comes to light in its own
right, since it cannot contain naked content - only <td> and <th>
elements. (There have been more crass examples of CSS failures in
relation to table elements in earlier browser/versions, you might
recall.)

That's kind-of understandable in HTML terms - but I can't think that
such processing can be correct in CSS terms, any more than the failure
to inherit text sizing etc. into the table in earlier browser
versions, which has now (I think) been generally corrected (? at least
in standards modes ?). Sorry, I do have a day job as well, and don't
always manage to keep up with these details.

Now if you apply the background-image to TABLE you can blank it
out non-header row by have a class with a flat color image for
the background,

Sure; but specifying a colour and no image would surely be as
effective?

background-color, yes; background-image, no.
background-image: none' means no image for element so what's beneath
shows through, it does not mean erase image

That's what I meant, indeed. Sorry I didn't explain it clearly the
first time.

cheers

[Keith Baird]

"Alan J. Flavell" <fl*****@ph.gla.ac.uk> wrote:

The problem, I feel sure, is that <tr> is somehow being processed as a
special kind of object, which never actually comes to light in its own
right, since it cannot contain naked content - only <td> and <th>
elements.

Such problems sometimes are avoided by specifying the table model in the
stylesheet (e.g. border-collapse: collapse), without which some browsers
seem not to recognize full "elementhood" for <TR>.

--/<eith

[Alan J. Flavell]

On Tue, 8 Nov 2005, Keith Baird wrote:

"Alan J. Flavell" <fl*****@ph.gla.ac.uk> wrote:

The problem, I feel sure, is that <tr> is somehow being processed as a
special kind of object, which never actually comes to light in its own
right, since it cannot contain naked content - only <td> and <th>
elements.

Well, if I add to the properties for the row, an explicit
specification of "background-attachment: fixed;" (instead of its
implied setting of scroll), then Opera produces the desired result
(and it doesn't upset Mozilla). But MSIE steadfastly restarts the
background image in each table cell, I haven't managed to disssuade
it.
Such problems sometimes are avoided by specifying the table model in
the stylesheet (e.g. border-collapse: collapse), without which some
browsers seem not to recognize full "elementhood" for <TR>.

Thanks, but I haven't found any version of those settings which helps.
Feel free to take a copy of my test document to fiddle with:
http://ppewww.ph.gla.ac.uk/~flavell/tests/tablebg.html , and to post a
report of any improvement you come up with.

cheers

[Giggle Girl]

> A very common problem, it is always more helpful if we do not have to

divine the OP's intentions!

The situation is outlined very clearly in my original posting.

Mr.Flavell seemed to get it. For clarification see his link:

http://ppewww.ph.gla.ac.uk/~flavell/tests/tablebg.html

When I view this in IE it restarts the background image every cell. In
Firefox it works properly. I haven't been able to find any properties
that achieve the desired effect for IE.

Looks like I am stuck with the "old school" hack of nest tables I
described.

Thanks,
Ann

[Keith Baird]

Keith Baird wrote:

Such problems sometimes are avoided by specifying the table model in
the stylesheet (e.g. border-collapse: collapse), without which some
browsers seem not to recognize full "elementhood" for <TR>.
"Alan J. Flavell" <fl*****@ph.gla.ac.uk> wrote: Thanks, but I haven't found any version of those settings which helps.
Feel free to take a copy of my test document to fiddle with:
http://ppewww.ph.gla.ac.uk/~flavell/tests/tablebg.html , and to post a
report of any improvement you come up with.

I have, and all I can report is that the background image works as
desired across the row in Firefox 1.0, MSIE 5.2.3, Opera 8.01, and
Safari 1.3.1 (all for Mac) when "background-attachment: fixed" is
specified; when the property is removed the image still spans the row in
Firefox and MSIE but is reset for each cell in Opera and Safari.
Specifying "border-collapse: collapse" doesn't affect the behavior of
the background image in any of these four browsers.

--/<eith

[Alan J. Flavell]

On Thu, 10 Nov 2005, Keith Baird wrote:

I have, and all I can report is that the background image works as
desired across the row in Firefox 1.0, MSIE 5.2.3, Opera 8.01, and
Safari 1.3.1 (all for Mac) when "background-attachment: fixed" is
specified; when the property is removed the image still spans the row in
Firefox and MSIE but is reset for each cell in Opera and Safari.
Interesting, thanks.

Apparently you're referring to the Mac IE browser as "MSIE".
Whenever I say MSIE without qualfication, I'm referring to the Windows
OS component that thinks it's a browser. These are two utterly
different implementations. Mac IE was rated to be a good
implementation for its time, although that time has now rather passed:
WinIE quite deliberately violates some mandatory requirements of the
interworking specifications, as well as misbehaving in all kinds of
different and unexpected ways, despite repeated updates. But you
surely knew that.
Specifying "border-collapse: collapse" doesn't affect the behavior of
the background image in any of these four browsers.

The killer, as far as deployment in a general web context is
concerned, seems to be the (mis)behaviour of Win IE6, and, without an
answer for that, we're going to be told that we haven't really come up
with a solution for the original question.

I think the best that can be achieved (if WinIE6 is to be supported)
is to specify a background image for the <table>, and to blank it out
where it's not wanted. This is sketched out (without any finesse) in
the second sample at
http://ppewww.ph.gla.ac.uk/~flavell/tests/tablebg2.html
(the difference will be apparent to those using WinIE6, anyway).

What this can't achieve is, different background images in different
rows.

cheers