homepage Welcome to WebmasterWorld Guest from 54.167.138.53
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Background image in <td>
mini

5+ Year Member



 
Msg#: 3807762 posted 11:29 am on Dec 15, 2008 (gmt 0)

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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3807762 posted 11:34 am on Dec 15, 2008 (gmt 0)

Try removing the quotes from around your image path :)

mini

5+ Year Member



 
Msg#: 3807762 posted 12:01 pm on Dec 15, 2008 (gmt 0)

I have done that.

I have changed it to:

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

Still its not working.

limbo

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3807762 posted 12:26 pm on Dec 15, 2008 (gmt 0)

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

WebmasterWorld Senior Member swa66 us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3807762 posted 12:34 pm on Dec 15, 2008 (gmt 0)

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

5+ Year Member



 
Msg#: 3807762 posted 12:37 pm on Dec 15, 2008 (gmt 0)

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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3807762 posted 12:37 pm on Dec 15, 2008 (gmt 0)

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

WebmasterWorld Senior Member pageoneresults us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3807762 posted 12:52 pm on Dec 15, 2008 (gmt 0)

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

WebmasterWorld Senior Member swa66 us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3807762 posted 2:37 pm on Dec 15, 2008 (gmt 0)

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

WebmasterWorld Senior Member pageoneresults us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3807762 posted 2:40 pm on Dec 15, 2008 (gmt 0)

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

WebmasterWorld Senior Member swa66 us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3807762 posted 3:10 pm on Dec 15, 2008 (gmt 0)

@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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3807762 posted 4:30 pm on Dec 15, 2008 (gmt 0)

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

5+ Year Member



 
Msg#: 3807762 posted 5:35 am on Dec 16, 2008 (gmt 0)

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

WebmasterWorld Senior Member swa66 us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3807762 posted 1:03 pm on Dec 16, 2008 (gmt 0)

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

5+ Year Member



 
Msg#: 3807762 posted 6:51 am on Dec 17, 2008 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved