Background color of table, seeping through Image/Table border 1

[powahusr]

I am housing 2 images in a table; I am trying to get the table to display an image without having the table background color seep through the top & bottom border areas of the image(s).

This table actually holds the logo I will be using on the page. I am trying to make the page "Tug & Pull" proof so that everything looks good under all Browser sizes. If I can just get the BG color to not show where I don’t need it to, everything will be great.


Bellow is the table in question. I will give you a quick synopsis of what’s going on with it:

I have 1 Row containing 2 Cells. The first cell contains a plain gradient image, the image in the second cell contains a 1 pixel wide solid color of the right most gradient shade in image 1. The Table background gives the viewer the illusion that the image stretches across the whole page, when it’s really just the BG color taking over. Anyway, that effect works great, however, as I stated before, the Table BGColor clashes with Image 1, when it shows between the Image and the 0 width border of the Table.

Any suggestions?


Here is the html:


<table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; bgcolor=&quot;#FF0000&quot;>
<tr>
<td width=&quot;50%&quot; valign=&quot;top&quot;>
<p align=&quot;left&quot;><img border=&quot;0&quot; src=&quot;Images/image1.gif&quot; width=&quot;502&quot; height=&quot;55&quot;>
</td>

<td width=&quot;50%&quot; valign=&quot;top&quot;>
<img src=&quot;image2.gif&quot; width=&quot;1&quot; height=&quot;55&quot; border=&quot;0&quot;>
</td>
</tr>
</table>


Thanks in Advance!!!

 

[Wullie]

Hi mate,

The reason for this is the line breaks within the cells.

<td width=&quot;50%&quot; valign=&quot;top&quot;>
<img src=&quot;image2.gif&quot; width=&quot;1&quot; height=&quot;55&quot; border=&quot;0&quot;>
</td>

Always use the following instead:

<td width=&quot;50%&quot; valign=&quot;top&quot;><img src=&quot;image2.gif&quot; width=&quot;1&quot; height=&quot;55&quot; border=&quot;0&quot;></td>

If you break onto a new line by pressing enter within a cell, the browser will intepret that as a line break.

Hope this helps Wullie

http://www.freshlookdesign.co.uk

http://www.freshlookdesign.com

http://www.mailtosanta.co.uk

The pessimist complains about the wind. The optimist expects it to change.
The leader adjusts the sails. - John Maxwell

 

[powahusr]

It Worked, Thanks a lot!!