<td> with background image - what's the right way?

I have a horizontal navigation bar, which is a single row table containing
the right images. It "stretches" itself across the screen using a
penultimate td like this:

<td width="100%" background="images/nav_bar/nb_spacer.gif">&nbsp;</td>

which works in all major browsers that I've tried, but doesn't validate. No
background attribute to the td tag, apparently.

What is the correct way to do this? A stylesheet entry with a
background-image? I've tried what look like sensible permutations, based
around this:

<td width="100%" style="background-image:
images/nav_bar/nb_spacer.gif">&nbsp;</td>

but none of them show the image. Changing that line to set the background
colour to blue works, so I must be doing something fundamentally wrong.

--
The email address used to post is a spam pit. Contact me at
http://www.derekfountain.org : <a
href="http://www.derekfountain.org/">Derek Fountain</a>

Derek Fountain wrote:
[color=blue]
> I have a horizontal navigation bar, which is a single row table containing
> the right images.[/color]

Single row? That doesn't sound like tabular data. Try a list instead.
http://css.maxdesign.com.au/listamatic/
[color=blue]
> What is the correct way to do this? A stylesheet entry with a
> background-image?[/color]

Yes
[color=blue]
> <td width="100%" style="background-image:
> images/nav_bar/nb_spacer.gif">&nbsp;</td>[/color]

CSS is a nice manual which can tell you what the syntax is ...
http://www.w3.org/TR/CSS2/colors.htm...ckground-image
.... and a validator so you can test you code ...
http://jigsaw.w3.org/css-validator/

--
David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is

On Fri, 04 Mar 2005 16:51:07 +0800, Derek Fountain <nospam@example.com> wrote:
[color=blue]
> I have a horizontal navigation bar, which is a single row table containing
> the right images.[/color]

A navigation menu usually is just a list of links that take a visitor anywhere
within the site they're at. What makes your navigation menu tabular data?
[color=blue]
> It "stretches" itself across the screen using a
> penultimate td like this:
>
> <td width="100%" background="images/nav_bar/nb_spacer.gif">&nbsp;</td>[/color]

Ugly hack.
[color=blue]
> which works in all major browsers that I've tried, but doesn't validate. No
> background attribute to the td tag, apparently.[/color]

That might be, because usually tabular data can do just fine without a
background image :-)
From <http://www.w3.org/TR/html401/struct/tables.html#edef-TD>:

<blockquote>
<!ELEMENT (TH|TD) - O (%flow;)* -- table header cell, table data cell-->
<!-- TH is for headers, TD for data, but for cells acting as both use TD -->
<!ATTLIST (TH|TD) -- header or data cell --
%attrs; -- %coreattrs, %i18n, %events --
abbr %Text; #IMPLIED -- abbreviation for header cell --
axis CDATA #IMPLIED -- comma-separated list of related
headers--
headers IDREFS #IMPLIED -- list of id's for header cells --
scope %Scope; #IMPLIED -- scope covered by header cells --
rowspan NUMBER 1 -- number of rows spanned by cell --
colspan NUMBER 1 -- number of cols spanned by cell --
%cellhalign; -- horizontal alignment in cells --
%cellvalign; -- vertical alignment in cells --[color=blue]
>[/color]
</blockquote>

Nope, it's not there.
[color=blue]
> What is the correct way to do this?[/color]

You can check my site for a horizontally layed out navigation menu, using lists.
It is not hard to add the image rollover effect as a background property with
CSS. Google for CSS Rollovers. You can find a something to get you started at:
<http://www.alistapart.com/articles/taminglists/> and
<http://www.alistapart.com/articles/dropdowns/>

--
,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------'

David Dorward <dorward@yahoo.com> wrote:
[color=blue][color=green]
>> What is the correct way to do this? A stylesheet entry with a
>> background-image?[/color]
>
> Yes[/color]

Not quite. Normally it is best to use the shorthand property, e.g.
background: url(images/nav_bar/nb_spacer.gif);
Not really for shortness but for the reason that this also sets the
background-color property (to the initial value, transparent - you can also
specify an explicit value of course).

This is one of the many reasons why it is better to set background images (if
you use them) in CSS: it's much easier to set all the relevant properties
(background image, background color, text color, and the four link colors)
consistently and without fear of some nasty alien style interfering
unpredictably.

--
Yucca, http://www.cs.tut.fi/~jkorpela/
Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html

> Single row? That doesn't sound like tabular data. Try a list instead.[color=blue]
> http://css.maxdesign.com.au/listamatic/[/color]

I clicked on a dozen or so of those horizontal list examples and none of
them seemed to do what I want. Maybe one does, but I couldn't see it. See
my website linked in the footer of this post: my navigation bar is a set of
images containing image maps, not just flat words. The graphics were
produced with Adobe Imageready.
[color=blue]
> CSS is a nice manual which can tell you what the syntax is ...
> http://www.w3.org/TR/CSS2/colors.htm...ckground-image[/color]

Ah, missed the url() thingy. Thanks for the pointer.

--
The email address used to post is a spam pit. Contact me at
http://www.derekfountain.org : <a
href="http://www.derekfountain.org/">Derek Fountain</a>

"Derek Fountain" <nospam@example.com> wrote in message
news:42282160$0$5483$5a62ac22@per-qv1-newsreader-01.iinet.net.au...[color=blue]
> I have a horizontal navigation bar, which is a single row table containing
> the right images. It "stretches" itself across the screen using a
> penultimate td like this:
>
> <td width="100%" background="images/nav_bar/nb_spacer.gif">&nbsp;</td>
>
> which works in all major browsers that I've tried, but doesn't validate.[/color]
No[color=blue]
> background attribute to the td tag, apparently.
>
> What is the correct way to do this? A stylesheet entry with a
> background-image? I've tried what look like sensible permutations, based
> around this:
>
> <td width="100%" style="background-image:
> images/nav_bar/nb_spacer.gif">&nbsp;</td>
>
> but none of them show the image. Changing that line to set the background
> colour to blue works, so I must be doing something fundamentally wrong.
>
> --
> The email address used to post is a spam pit. Contact me at
> http://www.derekfountain.org : <a
> href="http://www.derekfountain.org/">Derek Fountain</a>[/color]

IIRC the following will validate.
Good Luck,
me

The syntax below is for a style sheet in the head of the document:

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
..bgimage { background-image: url(arrow.gif); background-repeat: repeat}
-->
</style>
</head>
<body bgcolor="#FFFFFF">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="bgimage">
<p>text</p>
</td>
</tr>
</table>
</body>
</html>

The syntax below is for an external style sheet:

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="bgimage.css">
</head>
<body bgcolor="#FFFFFF">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="bgimage">
<p>text</p>
</td>
</tr>
</table>
</body>
</html>

Below is the contents of the external style sheet named bgimage.css:

..bgimage { background-image: url(arrow.gif); background-repeat: repeat}