background td images

[Sarky78]

firstly i want to apologise for posting another question about background images but i can't actually find an answer to this on the site.

I have got three td cells that all have a background image. two end pieces left and right and then a center image. This is used for the navigation of the website, when a user is in a particular section the background image is changed using server side code to a darker shade for all three images.

This on state works fine and the left and right for the td's works fine for the off state, but the center image is not being displayed in netscape.

this is not working for the off state the on state which is the same code just a different image is working fine. this is just in netscape, i don't really want to create a page for NS and one for IE

the code that i am using is:

<TR>
<TD><img src=&quot;images/but_left.gif&quot; WIDTH=&quot;6&quot; HEIGHT=&quot;22&quot; BORDER=&quot;0&quot; ALT=&quot;&quot;></TD>
<TD BACKGROUND=&quot;images/but_mid.gif&quot; align=center><a href=&quot;company/index.cfm&quot; class=&quot;link&quot;>COMPANY</A></TD>
<TD><img src=&quot;images/but_right.gif&quot; BORDER=&quot;0&quot; ALT=&quot;&quot; WIDTH=&quot;6&quot; HEIGHT=&quot;22&quot;></TD>
</TR>

all of the images exist by the way i checked that one first

cheers

 

[xutopia]

I believe background is not a valid attribute try using CSS :


<td style=&quot;background-image : url(images/but_mid.gif);background : url(images/but_mid.gif);&quot; align=center>

Hope this helps. Gary

http://www.xutopia.com

Haran

 

[starway]

xutopia,
<td background=&quot;&quot;> is a common thing that is used on hundreds of sites without any problem. I used it many times myself, so this is not the reason.

arperry,
First of all I don't see the code for the rest 2 background images to try to see the difference that cause your problem.
Posting entire code or showing the link is a good idea, because there are many small details that can be guilty.

 

[Sarky78]

here you go guys

One that is working

<TR>
<TD><img src=&quot;images/but_left_o.gif&quot; WIDTH=&quot;6&quot; HEIGHT=&quot;22&quot; BORDER=&quot;0&quot; ALT=&quot;&quot;></TD>
<TD BACKGROUND=&quot;images/but_mid_o.gif&quot; class=&quot;inLink&quot;>HOME</TD>
<TD><img src=&quot;images/but_right_o.gif&quot; BORDER=&quot;0&quot; ALT=&quot;&quot; WIDTH=&quot;6&quot; HEIGHT=&quot;22&quot;></TD>
</TR>

One that isn't

<TR>
<TD><img src=&quot;images/but_left.gif&quot; WIDTH=&quot;6&quot; HEIGHT=&quot;22&quot; BORDER=&quot;0&quot; ALT=&quot;&quot;></TD>
<TD BACKGROUND=&quot;images/but_mid.gif&quot; align=center><a href=&quot;company/index.cfm&quot; class=&quot;link&quot;>COMPANY</A></TD>
<TD><img src=&quot;images/but_right.gif&quot; BORDER=&quot;0&quot; ALT=&quot;&quot; WIDTH=&quot;6&quot; HEIGHT=&quot;22&quot;></TD>
</TR>

Classes:

a.link {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
font-weight:bold;
text-align:center;
text-decoration: none;
}

.inLink {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
font-weight:bold;
text-align:center;
text-decoration: none;
}

 

[crazyboybert]

i dont know if this is going to cure your netscape problem but i did notice something looking at your code snippets.

The images in the left and rioght table cell are being put into the document flow as the contents of the cell whereas your middle image is a background image with text as the contents of the cell. The left and rioght images both have width and height specified as attributes of the image tag whereas there are no width attributes for the middle image as it is a background. You may find that by adding a width attribute to the table cell containing the background image this will improve the cross browser stability - especially as the text content of the cell changes and is not of the same width.

One of the many annoyances with netscape 4.x is it may choose for reasons best known to itself to ignore the width attribute if the content of the td cell is not sufficient to force the cell to that size - hence the use by many developers of spacer gifs to pad the cell and force it to the required size.

this may help i dont know - good luck

rob

 

[starway]

I checked this code (changing images names and paths) and saw that everyhting works properly in all browsers including NN4.7.
As expected, background image is seen in both sample codes. There are no any errors there.

Check if all your images are OK and placed in proper directories.

 

[starway]

crazyboybert,
If an image is placed in table cell background any of it's attributes should not be added. Of course, you can try, but it will not take any effect.
And there's nothing wrong with Netscape here, these are basic html rules.

 

[Sarky78]

hey guys thanks for the replies.

starway:
all of the images are there and can be displayed in nn4.7 by typing the image name and directory onto the url they all come up fine. can you post a link to the page you created (just for my own sanity really) so i can have a look

all of the images show up apart from the mid one for the off state (images/but_mid.gif)

if i change the code to style=&quot;background: url(images/but_mid.gif)&quot; it puts a background in but it is not the image, its just a black background. I have tried background-image and that doesn't do anything !

 

[starway]

I don't have a link - I did it offline. But all I did was copying/pasting your code into blank html page and changing image names.

I just recalled one thing: it can be a problem in NN4.x to display very small images (about 10px wide) placed in background. The only solution is to use larger ones. But as far as I remember it happens only in very narrow cells without anything inside except nbsp; whitespace.
If it's not the case (and I see that it's not) I have no idea what is happening to you out there.

It's not a surprise that style=background: url() doesn't do anything. As far as I know it can be applied to <body> and <html> tags only. At least some of the afforts I've made in past to use it in table cells weren't successful.

 

[crazyboybert]

starway:

&quot;The left and right images both have width and height specified as attributes of the image tag whereas there are no width attributes for the middle image as it is a background. You may find that by adding a width attribute to the table cell containing the background image this will improve the cross browser stability.&quot;

My point was NOT that the background image should have a width attribute. This would really be a bit silly wouldnt it unless we had a <background> tag to apply the attribute to?

It was more that the width of the table cell with a specified background image is determined by the content of the table cell NOT the dimensions of the background image. Therefore if the content of the cell is not big enough to reveal the entire area of the background image you will see only part of it. This can be avoided by specifying a width attribute on the table cell to force it larger. As mentioned above this is not always 100% reliable in NS4.x

obviously this is most likely not related to the problem arperry is having, however NS4.x will be more stable with a table layout where widths are specified for the cells and will in most cases render the page quicker also.

another point worthy of note here is netscape response to nested tables with background images. If a table or table cell has a background=&quot;x.gif&quot; specified then any nested tables will inherit this background unles an empty background=&quot;&quot; is placed in the table tag. Of course you could use css and avoid this anyway.

rob

 

[Sarky78]

just thought that i would let you all know that i have found out what the problem was. I am using Win NT as my platform and it turns out to be a problem with NN4 on Win NT 4. thanks for your posts