Insert table cell with CSS?

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

John A. - 23 Dec 2003 06:01 GMT

Hello all!

I've got a big bunch of pages using tables for layout. Eventually I'll
get them set up with more modernized code, but in the meantime I'd
like to slip in a little quick holiday decoration. I'd like to insert
a table cell with a fixed width (as much as such things can be fixed)
and a repeating garland background so as to show up along the left
side of the table, repeating down its length.

Our site has a couple thousand static pages, generated from a database
& a couple dozen templates. A couple years ago I did this with an
alternate version of the template set, but to bring all that up to
date with the changes made since would be far from trivial. I'd like
to be able to just make a little code change to the templates that
would allow me to just change one file on the server in order to
insert the desired code on all pages on the site.

SSI would be ideal, but isn't an option as Apache 1.3 won't apply it
to the output of our shopping cart CGI script, and my hosting provider
is dragging its feet on an Apache 2.x upgrade which I hear could
handle it.

That leaves CSS as looking like the most likely candidate, so I'm here
asking for some learned advice.

I've looked at "before" and "content" as a possible basis, but I'm not
sure they can handle the tags & quotes that need to be inserted. Also,
browser support doesn't seem all that great.

Can anyone suggest a solution that can insert the needed code, be
easily switched to inserting absolutely nothing later on, and fail
gracefully on older browsers? (We still get NS3 hits, for crying out
loud!)

Thanks for any insight!

JA

Reply to this Message

Philipp Lenssen - 23 Dec 2003 10:45 GMT

> I've got a big bunch of pages using tables for layout. Eventually I'll
> get them set up with more modernized code, but in the meantime I'd
> like to slip in a little quick holiday decoration. I'd like to insert
> a table cell with a fixed width (as much as such things can be fixed)
> and a repeating garland background so as to show up along the left
> side of the table, repeating down its length.

Sounds like a background-image. Look up the property and play around
with it to see if it gives the effect you want.

> Can anyone suggest a solution that can insert the needed code, be
> easily switched to inserting absolutely nothing later on, and fail
> gracefully on older browsers? (We still get NS3 hits, for crying out
> loud!)

Old browsers won't see your decoration -- doesn't sound like a problem.
Use CSS on top of the HTML structure and be prepared to live without it.

Reply to this Message

John A. - 23 Dec 2003 14:44 GMT

>> I've got a big bunch of pages using tables for layout. Eventually I'll
>> get them set up with more modernized code, but in the meantime I'd
[quoted text clipped - 5 lines]
>Sounds like a background-image. Look up the property and play around
>with it to see if it gives the effect you want.

That much I know. What I want is for the cell with that background to
not be there normally, but get inserted by CSS. I know the HTML code I
need inserted and where. I just don't know how to best go about it in
CSS.

>> Can anyone suggest a solution that can insert the needed code, be
>> easily switched to inserting absolutely nothing later on, and fail
[quoted text clipped - 3 lines]
>Old browsers won't see your decoration -- doesn't sound like a problem.
>Use CSS on top of the HTML structure and be prepared to live without it.

Reply to this Message

Allen - 23 Dec 2003 15:43 GMT

> That much I know. What I want is for the cell with that background to
> not be there normally, but get inserted by CSS. I know the HTML code I
> need inserted and where. I just don't know how to best go about it in
> CSS.

You really can't use CSS to dynamically insert html. As you'd stated, SSI
would be the ideal way to implement this . . . but if that's out of the
question -- then perhaps a feasible work-around would be to place a
background image in the table cell you wish for it to be next to. If you
place the background in and have it repeat only vertically, it won't
necessarily fill the the cell. You could then pad the side of the cell
that the background is to the width of the image. Then, rather than
filling the entire cell the text would only fill the part not occupied by
the background image.

For example, let's assume the garland is 100 pixels wide and the left-most
cell class is named "cell1" and you wanted the garland running down the
left side of the table, you could use css like this:

td.cell1 {
background: #fff url(garland.gif) repeat-y;
padding: 0 0 100px 0; }

This would have the garland occupy the first 100 pixels of the cell; the
rest of the cell content (text or whathaveyou) would occupy the rest.

CSS 2 Background properties:
http://www.w3.org/TR/REC-CSS2/colors.html#background-properties

Signature

Allen http://theprawn.com

This is for the flowers, http://protempore.org/jarday
who have no appreciation
for beauty;
And the sheer ugliness of it all
will surely be lost on them.

Reply to this Message

John A. - 23 Dec 2003 19:42 GMT

>> That much I know. What I want is for the cell with that background to
>> not be there normally, but get inserted by CSS. I know the HTML code I
[quoted text clipped - 24 lines]
>CSS 2 Background properties:
>http://www.w3.org/TR/REC-CSS2/colors.html#background-properties

Interesting, but I already have a background image in the cell. The
cell's width varies throughout the site as the content varies and we
allow the browser to flow the text itself.

The site is http://www.virginiaquilter.com/ and the image with the
garland is http://www.virginiaquilter.com/images/tanquilt3holiday.jpg

The last time we used it I manually added <td ROWSPAN="3"
BACKGROUND="/images/tanquilt3holiday.jpg" BGCOLOR="#CDBE9D"
width="32"><img src="/images/spacer.gif" width=24></td> to insert the
garland. It probably could have been coded more efficiently. :)

JA

Reply to this Message

Allen - 23 Dec 2003 23:46 GMT

<no.john@spammers.virginiaquilter.allowed.com> noted:

> Interesting, but I already have a background image in the cell. The
> cell's width varies throughout the site as the content varies and we
> allow the browser to flow the text itself.

Perhaps, then, apply the background image to the table itself as outlined
previously for the cell -- then padd the cells accordingly?

Like I said, you cannot insert HTML using CSS (though, in a sense, you can
/hide/ html that's already there). So, creatively coming up with a
workaround is an option -- otherwise, you're stuck re-coding it to
accomodate. It would be entirely feasible (and a good idea for the future)
to replace those tables with divs and even, perhaps, include a few extra
spans to leave yourself room to input these seasonal touches. It would
require a bit of a time investment, initially, but would save time (and
headache) later on.

Signature

Allen http://theprawn.com

This is for the flowers, http://protempore.org/jarday
who have no appreciation
for beauty;
And the sheer ugliness of it all
will surely be lost on them.

Reply to this Message

John A. - 26 Dec 2003 05:54 GMT

><no.john@spammers.virginiaquilter.allowed.com> noted:
>
[quoted text clipped - 13 lines]
>require a bit of a time investment, initially, but would save time (and
>headache) later on.

Well, after a Javascrip-based false start (I had a script invoked from
between a <tr> and a <td> to write the desired code, which worked fine
in all browsers tested until Netscape Composer insisted on wrapping
the invocation code with <td></td>,) I'm going with a combination of a
mostly blank extra cell with its own class name and CSS to modify it.

It works fine in NS7.01, and in Mozilla 1.5rc1, but IE5.5 and NS4.7
don't expand the cell width per the CSS.

HTML code...

<td rowspan=3 BACKGROUND="/tanquilt3.jpg" width=0 BGCOLOR="#CDBE9D"
class="decobord"> </td>

(Had to include default color & background and a non breaking space
for NS4 to not just put a blank gap left of our navigation bar. NS7
and Moz. don't render a gap. Didn't test IE for that bug.)

CSS code...

td.decobord {
width:32px;
background: url(/images/tanquilt3holiday.jpg);
margin:0;
padding:0; }

The test page...

http://www.virginiaquilter.com/test/testproduct.html

Can anyone suggest a workaround? I really don't want to have the cell
always at the decorative width, and would like CSS-less browsers to
default to something narrow. (I'm guessing systems still running those
browsers would tend to have lower display resolutions too.)

Would sticking something else in the table, like a 1-pixel transparent
spacer GIF, and having CSS resize it when I decorate do the trick?

Thanks for any insight!
JA

Reply to this Message

John A. - 26 Dec 2003 06:16 GMT

>The test page...
>
[quoted text clipped - 7 lines]
>Would sticking something else in the table, like a 1-pixel transparent
>spacer GIF, and having CSS resize it when I decorate do the trick?

Okay, after asking if that would work theoretically, I went ahead and
did it. It seems to work.

New HTML code...

<td rowspan=3 BACKGROUND="/tanquilt3.jpg" width=0 BGCOLOR="#CDBE9D"
class="decobord"><img src="/images/spacer.gif" width=0
class="decospace"></td>

New CSS code...

td.decobord {
width:32px;
background: url(/images/tanquilt3holiday.jpg);
margin:0;
padding:0; }

img.decospace {
width:31px; }

Test page still as above.

Seems to work in all tested browsers.

But would putting, say, a DIV instead of an image perhaps be more
bandwidth- and connection-efficient? Or would that have as much
backwards-compatibility as using the image+CSS?

Thanks!
JA

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / December 2003

Insert table cell with CSS?