Backrounds in <tr> tags

Forum Moderators: open

Message Too Old, No Replies

Backrounds in <tr> tags

Is this not compatible with IE or is it the coding..

Oranjy

10:29 am on May 4, 2005 (gmt 0)

On my site, I have a main navigation at the top of the page, this is just text links positioned inside <td> tags and I placed a backround image to be positoned behind the text. The code is there but the image never appears through the browser, only in Dreamweaver.
Here's a the code;

<tr background="http://www.mysite.com/images/topnavbg.GIF">
<td height="26" colspan="2" cellspacing="0">
<div id="tnav">
<div align="center">
<p>Home Ś <a href="http://www.mysite.com/shop/index.html">Shop</a> Ś <a href="http://www.mysite.com/shop/designs/index.html">Designs </a>Ś <a href="http://www.mysite.com/about/index.html">About</a> Ś <a href="http://www.mysite.com/about/help.html">Help</a> </p>
</div>
</div></td>
</tr>

Anyone know why the image doesn't display?

[edited by: BlobFisk at 11:41 am (utc) on May 4, 2005]
[edit reason] Examplified URLs [/edit]

birdbrain

10:53 am on May 4, 2005 (gmt 0)

Hi there Oranjy,

the answer is to use CSS, like this...


<tr [blue][2] style="background-image:url(http://www.oranjy.com/images/topnavbg.GIF)"[/2][/blue]>

If you are unfamiliar with CSS pay a visit to...

w3schools [w3schools.com]

birdbrain

Span

10:56 am on May 4, 2005 (gmt 0)

According to the DTD [w3.org] you are using backgroundimages are not allowed in <tr>.

<!ATTLIST tr
%attrs;
%cellhalign;
%cellvalign;
bgcolor %Color; #IMPLIED
>

birdbrain

11:14 am on May 4, 2005 (gmt 0)

Hi there Span,

According to the DTD you are using background-images are not allowed in <tr>.

You are confusing background (deprecated attribute) with
the CSS background-image which is, of course, allowable.

birdbrain

Oranjy

11:14 am on May 4, 2005 (gmt 0)

Thanks birdbrain,
I replaced the original code with the css one. The image appears in IE6 but isn't there in Firefox. Is there anyway to get round this browser incompatability?

birdbrain

11:22 am on May 4, 2005 (gmt 0)

Hi there Oranjy,

well, it worked for me. :)

I tested it in these browsers...

IE 6.02
Firefox 1.0.3
Opera 7.54
Netscape 7.1
Mozilla 1.7

...and could see no problems.

birdbrain

birdbrain

11:29 am on May 4, 2005 (gmt 0)

Hi there Oranjy,

it seems that you have changed .GIF to .gif. ;)
I suggest that you return to the original code.

birdbrain

Oranjy

11:34 am on May 4, 2005 (gmt 0)

Thanks, It must be due to some coding error specific to the page, because I have both broswers open on the same page and Firefox 1.03 shows a blank background while IE6 is showing me the image.
I just created a test blank page and created a table and added that code, uploaded it and you're right it did display in both browsers. So here is the code of the problematic page from the <head> down to the closing of related tags to the top of that page:

<table width="783" cellspacing="0">
<tr>
<td height="107" class="header"> </td>
</tr>
</table>
<table width="804" cellspacing="0">
<tr style="background-image:url(http://www.oranjy.com/images/topnavbg.GIF)">
<td height="26" colspan="2" cellspacing="0">
<div id="tnav">
<div align="center">
<p>Home ¦ <a href="http://www.oranjy.com/shop/index.html">Shop</a> ¦ <a href="http://www.oranjy.com/shop/designs/index.html">Designs </a>¦ <a href="http://www.oranjy.com/about/index.html">About</a> ¦ <a href="http://www.oranjy.com/about/help.html">Help</a> </p>
</div>
</div></td>
</tr>

Can you see anything wrong with this.
The full page source code is here:
oranjy dot com / source.txt
Thanks for any help..

Oranjy

11:36 am on May 4, 2005 (gmt 0)

----- Hi there Oranjy,

it seems that you have changed .GIF to .gif. ;)
I suggest that you return to the original code.

birdbrain ------

I just changed that so it wouldn't display in IE, untill I fix it to work in both browsers..

[edited by: Oranjy at 11:54 am (utc) on May 4, 2005]

Oranjy

11:46 am on May 4, 2005 (gmt 0)

Did you test the page on your computer or on a remote host?

Because the image does display for me in firefox when previwed from my computer. But when it's uploaded to my host the image isn't there..confusing?

P.S sorry for the multiple follow ups, I just found the edit button.

birdbrain

12:00 pm on May 4, 2005 (gmt 0)

Hi there Oranjy,

I suggest that you try these modifications....

<table width="804" cellspacing="0"style="padding-top:0px;">
<tr>
<td height="26" colspan="2"style="background-image:url(http://www.oranjy.com/images/topnavbg.GIF)">
<div id="tnav">

birdbrain