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

Insert table cell with CSS?

P: n/a
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
Jul 20 '05 #1
Share this Question
Share on Google+
7 Replies


P: n/a
John A. wrote:

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.
Jul 20 '05 #2

P: n/a
On 23 Dec 2003 10:45:26 GMT, "Philipp Lenssen" <in**@outer-court.com>
wrote:
John A. wrote:

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.


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
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.


Jul 20 '05 #3

P: n/a
John A. <no*****@spammers.virginiaquilter.allowed.com> noted in
news:qs********************************@4ax.com:
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...und-properties

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

P: n/a
On Tue, 23 Dec 2003 15:43:03 GMT, Allen <cr********@theprawn.com>
wrote:
John A. <no*****@spammers.virginiaquilter.allowed.com> noted in
news:qs********************************@4ax.com :
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...und-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/image...lt3holiday.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
Jul 20 '05 #5

P: n/a
Per news:5a********************************@4ax.com, John A.
<no*****@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.

--
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.
Jul 20 '05 #6

P: n/a
On Tue, 23 Dec 2003 23:46:57 GMT, Allen <cr********@theprawn.com>
wrote:
Per news:5a********************************@4ax.com, John A.
<no*****@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.


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">&nbsp;</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
Jul 20 '05 #7

P: n/a
On Fri, 26 Dec 2003 05:54:34 GMT, John A.
<no*****@spammers.virginiaquilter.allowed.com> wrote:
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?


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
Jul 20 '05 #8

This discussion thread is closed

Replies have been disabled for this discussion.