Page Looks Fine Locally, But Fails Live

[ibeblunt]

I've been working on this page for most of the afternoon, and the ONLY problem that I'm having with it is this ONE area. Here's the page:

http://www.sohh.com/index_1.php

If you look at the left hand side, you'll see a search area. On either side you'll see bottles of beer. Now, inbetween that is a TD with a image being called, but it won't show LIVE. If you view my source, select all and save it to your HD, it will work.

The code I have is:

<td
     width="141"
     align="center"
     style="background-color: #000;
          background-image: url("http://www.sohh.com/images/skin/obie_trice/tile_search.gif");
          background-repeat: no-repeat;">

Any tips will be appreciated...It's been a long day. Hopefully some fresh eyes will see the error of my ways.

one

[earther]

Why don't you just call it as a regular image instead of a BG image. Seems like making it a BG image just complicates things.

[hurricane.uk]

url("http://www.sohh.com/images/skin/obie_trice/tile_search.gif")

That's not what's in your markup, this is:

url("http://www.sohh.com/images/skin/obie_trice/tile_search.gif);

Notice the absence of the closing " for the background image.

[ibeblunt]

Why don't you just call it as a regular image instead of a BG image. Seems like making it a BG image just complicates things.

Because I need the form on top of the image.

[ibeblunt]

That's not what's in your markup, this is:

url("http://www.sohh.com/images/skin/obie_trice/tile_search.gif);

Notice the absence of the closing " for the background image.

You sure? When I look at the source I get this:

<td width="141" align="center" style="background-color: #000; background-image: url("http://www.sohh.com/images/skin/obie_trice/tile_search.gif"); background-repeat: no-repeat;"><input type="text" name="query" style="border: 1px solid #000; width: 100px;" />
						<br /><img width="58" height="5" src="/images/spacer.gif" />
						<br /><input type="image" src="http://www.sohh.com/images/skin/default/butn_search.gif" width="58" height="18" /></td>

[ucahg]

You sure? When I look at the source I get this:

<td width="141" align="center" style="background-color: #000; background-image: url("http://www.sohh.com/images/skin/obie_trice/tile_search.gif"); background-repeat: no-repeat;"><input type="text" name="query" style="border: 1px solid #000; width: 100px;" />
						<br /><img width="58" height="5" src="/images/spacer.gif" />
						<br /><input type="image" src="http://www.sohh.com/images/skin/default/butn_search.gif" width="58" height="18" /></td>

If that's the case, then your problem is here:

style=".... background-image: url("http://www.sohh.com/images/skin/obie_trice/tile_search.gif");... "

(emphasis added). Note your use of double quotes. You need to make one of those pairs of quotes single (conventionally the inner pair), or mark your quotes using &quote inside the style attribue, although I'm not sure how supported this is.

[Tygger2512]

=Note your use of double quotes. You need to make one of those pairs of quotes single (conventionally the inner pair), or mark your quotes using &quote inside the style attribue, although I'm not sure how supported this is.

Much simpler to remove the CSS to an external stylesheet then the double quotes are no longer a problem, and the presentation is removed from the markup, in line with standards.

Andy.

[ibeblunt]

I took advice from both of you and everything worked out! Thanks!