Pictures not coming together

[tfstom]

I have a logo that was originally 625x100 pixels.

The problem is that if I put it in browser it stretches the image.

So what I did was slice the image into 3. The middle slice is just a solid color with a strip that is a solid color, so this is the piece I use to stretch, since it won't affect the picture.

The problem is the 2 outside images look great, but the middle is showing at exactly the same size (even though I have the width as "100%" in the middle cell.

What am I doing wrong?

Here is a snippet of the table that has the image in it.

  <tr height="100">
    <td><table width="100%"  border="0" cellspacing="0" cellpadding="0" summary="Layout Table">
      <tr>
        <td><img src="images/Contour_logo_intranet1_1x1.gif" width="496" height="100" hspace="0" vspace="0"></td>
        <td><img src="images/Contour_logo_intranet1_1x2.gif" width="100%" height="100" hspace="0" vspace="0"></td>
        <td><div align="right"><img src="images/Contour_logo_intranet1_1x3.gif" width="129" height="100" hspace="0" vspace="0"></div></td>
      </tr>
    </table></td>
  </tr>

Thanks,

Tom.

 

[tviman]

First of all, your image shouldn't "stretch" on a web page unless there is an error in the HTML code that you're using. Second, when you split an image and then place it in a table, the table width has to be EXACTLY the same width as the overall image AND you have to explicitly set each table cell width to the same width as the image that you place in it.

That being said, what is the width of the table that contains the code above?

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

 

[tfstom]

The first part of the table is:

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" bordercolor="#000099">
  <tr height="100">

in my CSS file I have

body {
margin: 0;
padding: 0;
}


This will all the table to fill the whole screen, no matter what size the browser is.

I the image has to change size as it is the top part of my screen and meant to go all the way from the left to the right.

This was why I sliced the image. The left and right cells are a fixed size. Only the middle cell stretches, as there is no distortion here.

The old image, before I sliced the image was:

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" bordercolor="#000099">
  <tr height="100">
    <td><img src="../images/Contour_logo_intranet.jpg" width="100%" height="100"></td>
  </tr>

Tom

 

[tviman]

Okay, give this a try:

<tr>
        <td [COLOR=red]width="496"[/color]><img src="images/Contour_logo_intranet1_1x1.gif" width="496" height="100" [COLOR=red]border="0"[/color]></td>
        <td><img src="images/Contour_logo_intranet1_1x2.gif" width="100%" height="100" [COLOR=red]border="0"[/color]></td>
        <td [COLOR=red]width="129"[/color]><img src="images/Contour_logo_intranet1_1x3.gif" width="129" height="100" [COLOR=red]border="0"[/color]></td>
      </tr>

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

 

[tfstom]

That was the right direction. I also need to align the 3rd <td> to the right (and make it a fixed size and it works fine.

Here is the code I ended up with that works as I wanted.

<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0" bordercolor="#000099">
  <tr height="100">
    <td><table width="100%" cellspacing="0" cellpadding="0" summary="Layout Table">
      <tr>
        <td width="496" height="100" ><img src="images/Contour_logo_intranet1_1x1.jpg" width="496" height="100" hspace="0" vspace="0"></td>
        <td width="100%"><img src="images/Contour_logo_intranet1_1x2.jpg" width="100%" height="100" hspace="0" vspace="0"></td>
        <td width="129" height="100" align="right"><img src="images/Contour_logo_intranet1_1x3.jpg" width="129" height="100" hspace="0" vspace="0"></td>
      </tr>
    </table></td>
  </tr>

Thanks,

Tom.

 

[tviman]

Glad you got it working!

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