Background image in <td>

[mini]

Earlier, I had the following code:

<td height="41" colspan="4" background="images/inn_99.jpg"><?php include "links.php";?></td>

But this was not accepted by the W3C Validator.

So I changed it to :

<td height="41" colspan="4" class="inn_99"><?php include "links.php";?></td>

And added the following code to the external CSS:

td.inn_99{
background: url('images/inn_99.jpg');
}

But this doesn't work. I mean the image is not visible on the page.

Where am I wrong?

[limbo]

Try removing the quotes from around your image path :)

[mini]

I have done that.

I have changed it to:

td.inn_99{
background: url(images/inn_99.jpg);
}

Still its not working.

[limbo]

OK - is there any other styles being applied to TD in your style sheet?

Is TD set to display:block (good)? Is TD set to float? Are the TD's contents floated? Would setting a td height and width break your layout?

[swa66]

Figuring out background problems is often easier if you use just a solid color first.

Something like background-color:red;

Next I'd have a look at the shorthand notations. They are meant to allow you to specify all of the background properties in one go, but they will reset the unspecified values to the default, which is often unintended.
Using something like background-image: url(images/inn_99.jpg); should solve that (but it might very well be in other places where you set other background things that this happens).
The standard [w3.org] explicitly states this behavior:

The 'background' property is a shorthand property for setting the individual background properties (i.e., 'background-color', 'background-image', 'background-repeat', 'background-attachment' and 'background-position') at the same place in the style sheet.

Given a valid declaration, the 'background' property first sets all the individual background properties to their initial values, then assigns explicit values given in the declaration.

Finally check your path, relative paths can be counter-intuitive. Relative URLs are relative to the base of the stylesheet, not to the html document.

The quotes around the string are allowed, in fact it'll protect you from error.

See also:
[w3.org...]

[mini]

There are other images associated with other TDs.

I cannot see anything like display:block in the code....nor could I see float.

Some TDs height and colspan attributes( as given in the above example). If these are removed, the layout is jumbled up.

[limbo]

The quotes around the string are allowed, in fact it'll protect you from error.

Interesting - so why's that then? I was discouraged from doing this some years ago - but never questioned why...

[pageoneresults]

The quotes around the string are allowed, in fact it'll protect you from error.

Ya, I was discouraged "many" years ago from using quote marks for image file references in external CSS. It had to do with Mac users generating 404s for those images. I just followed the advice at the time and haven't looked back since.

I think if you remove the quotes you are more apt to be protecting yourself from error, yes? ;)

[swa66]

Funny: I use a mac all the time ...

Guess it's got to do with IE for mac, which is dead and buried for all practical purposes. It's not been available for download for many years now. Microsoft at some point recommended using safari instead, now they're just silent about ever having made that.

Without the quotes around the URI string, you need to escape some characters from being picked up by the CSS parser. Far more tricky than using the quotes IMHO. Actually I don't understand why what is essentially a string doesn't always require the quotes.

e.g.:

• background-image: url("1(1).jpg");
  validates and works if you have such a file
  
• background-image: url(1(1).jpg);
  gives a parse error on the validator and doesn't work in any browser I tested except for IE6 and IE7 (where it works despite the syntax being way off) IE8beta2 works like the standards compliant browsers.
  
• background-image: url(1\(1\).jpg);
  validates and works if you have the 1(1).jpg file
  

I did the tests with FF3 (mac), safari (mac), and opera (mac), IE6, IE7, IE8beta2 (for IE all the native versions on a fully patched virtual machines running XP SP3).
I don't have IE5 for either mac or windows anymore.

To me a habit of always using the quotes doesn't seem to be bad.

[pageoneresults]

I don't get any errors with this...

background:#fff url(/images/file.jpg);

I'm concerned now that you bring it up. And, as I mentioned above, it was "many" years ago that the recommendation was made by papabaer and I heeded his advice.

[swa66]

@Mini

I don't think your problem comes from the sample you posted.

E.g.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
  <title>untitled</title>
  <style type="text/css">
   .inn_99 {
    background-image: url("2.jpg");
    height:41px;
   }
  </style>
 </head>
 <body>
   <table>
    <tbody>
     <tr>
      <td class="inn_99" colspan="4">text</td>
     </tr>
     <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
     </tr>
    </tbody>
   </table>
 </body>
</html>

Work fine in my tests.
The strict doctype disallows height, that's why I moved it to the CSS)

If you can expand on it till it does show the problem you have, you'll likely have found the problem. Anyway if you post minimal code still exhibiting the problem we might find it.

[alt131]

I think if you remove the quotes you are more apt to be protecting yourself from error

I was taught same and still, infrequently, randomly, without reason, have issues with quotes.
From the recommendations (emph added):

The format of a URI value is 'url(' followed by optional whitespace followed by an optional single quote (') or double quote (") character ...

At this stage quotes are optional unless:

Some characters appearing in an unquoted URI, such as parentheses, commas, whitespace characters, single quotes (') and double quotes ("), must be escaped with a backslash ...

To me using parentheses etc in names (does that still cause major troubles on non-windows platforms?) is putting in extra effort to create an extra issue so as to have to put in extra work to deal with it. I like to sleep occasionally ;)

mini
Before starting to rebuild the table, have you done a quick check by applying this image as a background to another td, and another image as a background to this <td>?

[edit reason]Whole sentence accidentally clipped while correcting spelling[/edit reason]

[mini]

Thanks to all of you. It is done.

Swa66, I have referred to your code and it is working that way. That is, it is working if I use an internal style and not the external style sheet.

I think my problem revolved all around external style sheet, internal style and inline styles. In some TDs, there are inline styles also, like this:

<td colspan="4" class="probg" bgcolor="#FFFFFF" style="background-position:bottom; background-repeat:no-repeat">

Now if I remove the style from here and put it in the <style></style> section (in the <head></head> section), it is not working.

It seems it is about the priority that each type of style receives.

[swa66]

In what directories are you storing your external CSS, your php (or html), and your images ?

Remember that relative paths in CSS are relative to the CSS, not to the html (or php in your case). Try it with an absolute path just to be sure that's not the problem.

[mini]

Thanks again, I think now I'm getting it right.

I have the php file in a folder called globe. Globe has a subfolder called style which has the stylesheet called style2.css

The path specified in the php file was
<link rel="stylesheet" type="text/css" href="style/style2.css" />

I moved style2.css from the subfolder style to the folder globe and changed the path to:
<link rel="stylesheet" type="text/css" href="style2.css" />
Now, everything looks fine.