IE vs Netscape: setting an image size = 100%

[blueindian1]

hi,

I have a banner that runs across the top of a web application. I have it chopped into 3 sections. The middle section is a 1 pixel wide slice which in IE will expand and contract such that the banner always spans the width of the screen. This does not work in Netscape and I'm hoping someone can shed some light on how to do this. As an aside, it also does not work on IE for Mac, but that's not terribly important. The code is below, thanks in advance.

		<!-- begin banner-->
        <table width=100% border=0 cellpadding=0 cellspacing=0>
        <tr width=100%>

          <td width=366>
               <img src=&quot;../images/2_01.jpg&quot; width=&quot;366&quot; height=&quot;79&quot;>
     </td>
          <td>
               <img src=&quot;../images/2_02.jpg&quot; width=&quot;100%&quot; height=&quot;79&quot;>
          </td>
          <td width=408>
               <img src=&quot;../images/2_03.jpg&quot; width=&quot;408&quot; height=&quot;79&quot;>
          </td>
         </table>

       </td>
     </tr>
</table>

 

[philote]

So what's it doing in Netscape? Is the cell stretching but the image isn't?

Kevin
A+, Network+, MCP

 

[blueindian1]

yes, and so the effect is that i have a big empty cell with a 1 pixel image in it.

 

[LaundroMat]

Couldn't you make the middle picture a background picture and have it repeated horizontally?

iirc, the code could look somtething like this:
<td width=366 style=&quot;background-image : url(../images/2_01.jpg); background-repeat : repeat-x&quot;>
</td>

 

[tviman]

What version of Netscape are your test this with? I've done this on Netscape 7.1 with no problems.

There's always a better way. The fun is trying to find it!

 

[blueindian1]

i'm using 7.1, and the repeating image did not work either

 

[philote]

If it's a one pixel image, why not just make the background color of the cell the color of the image?

Kevin
A+, Network+, MCP

 

[blueindian1]

because this is the image, it's more than one pixel tall and has multiple colors:

 

[blueindian1]

got it. the problem was that i was setting the pixel width for the cells that contained the left and right images. the soultion is to not set cell sizes and set each image tag to 100%:

		<!-- begin banner-->
        <table width=100% border=1 cellpadding=0 cellspacing=0>
        <tr width=100%>

          <td>
               <img src=&quot;../images/2_01.jpg&quot; width=&quot;100%&quot; height=&quot;79&quot;>
          </td>
          <td>
               <img src=&quot;../images/2_02.jpg&quot; width=&quot;100%&quot; height=&quot;79&quot;>
          </td>
          <td>
               <img src=&quot;../images/2_03.jpg&quot; width=&quot;100%&quot; height=&quot;79&quot;>
          </td>
         </table>

 

[blueindian1]

ok, i lied. that actually causes random behaviour in netscape.

any other ideas? i really need this to work with both without doing a browser check.

 

[Vragabond]

<table width=100% border=0 cellpadding=0 cellspacing=0>
 <tr width=100%>
  <td width=366>
   <img src=&quot;../images/2_01.jpg&quot; width=&quot;366&quot; height=&quot;79&quot; />
  </td>
  <td style=&quot;background-image: url(../images/2_01.jpg); background-repeat: repeat-x; width: 100%;&quot;>
   <img src=&quot;../images/2_02.jpg&quot; width=&quot;100%&quot; height=&quot;79&quot; />
  </td>
  <td width=408>
   <img src=&quot;../images/2_03.jpg&quot; width=&quot;408&quot; height=&quot;79&quot; />
  </td>
 </tr>
</table>

Your best bet solution was already provided by LaundroMat, I am not sure why you don't give that one a try. Repeating a background accross x-axis (what the code does) is almost identical to stretching the image. Actually, it is a better solution. So just try it report what's happening. Everything should be ok. If it is not, add backgrounds of this same image to all the three colums with the code provided.

 

[blueindian1]

laundromat & vagrobond:

thanks! it worked for me today. apparently i had something miscoded when i tried the other day.