asked on

Image causing weird table alignment

Hello all,

I have a page in which there is a border around the body content. This border consists of images and it is cut into three pieces. For some reason, When I add an image to one of the table cells of the middle piece, the border edges don't line up properly. If I remove the image, it works just fine. We have tried everything that we can think of and can't figure out what the problem is!

Here is a link to the page with the image:
http://woodcraftauction.ddogdesigns.com/auction/ddGalCatHome2.asp?CatID=43

Here is a link to the page without the image:
http://woodcraftauction.ddogdesigns.com/auction/ddGalCatHome2noimg.asp?CatID=43

-----------------------------------------------------------------------------------------------------------------
Here is the middle table in question. I have marked the line that contains the image in question. Does anyone have any suggestions as to how to make this thing behave?

<table border="0" cellpadding="0" cellspacing="0" width="610" style="margin: 0; padding: 0;">

<tr>
<td colspan="2" align="center" valign="middle" bgcolor="#FFFFFF"><img src="/Auction/ddGalImages/turnings.jpg" width="128" height="130"></td>
<td width="421" colspan="3" valign="top" bgcolor="#FFFFFF"> </td>
</tr>
<tr>

<td colspan="5" bgcolor="#016701" width="610" style="margin: 0; padding: 0;">
---------------------------------------------------------Offending Line------------------------------
<img src="ddGalImages/ddgalimages/ddgallayout_r6_c2.jpg" alt="Quick Links" name="ddgallayout_r6_c2" width="600" height="39" hspace="0" vspace="0" border="0" align="left" style="margin: 0; padding: 0;">
-------------------------------------------------------------------------------------------------------
</td>

</tr>
<tr>
<td width="173" align="left" valign="top" bgcolor="#ffffff">

 </td>
<td colspan="4" valign="top" bgcolor="#FFFFFF">

<table width="338" border="1" align="left" cellpadding="0" cellspacing="0" bordercolor="#FFFFFF" style="margin: 0; padding: 0;">
<tr>
<td colspan="2"><div align="center"> Items Located in <%=(rsCatName.Fields.Item("catDescription").Value)%> </div></td>
</tr>
<%
While ((Repeat1__numRows <> 0) AND (NOT rsCategoryItems.EOF))
%>
<tr valign="top">
<td height="42" align="center">
<div align="center"> <A HREF="/Auction/ddGalItemDetail.asp?<%= MM_keepNone & MM_joinChar(MM_keepNone) & "galItemID=" & rsCategoryItems.Fields.Item("galItemID").Value %>"><img src="/auction/images/gallery/<%= (rsCategoryItems.Fields.Item("galMainImg").Value)%> width='100'" width="100" border="0"></A>
</div></td>
<td align="left"><%=(rsCategoryItems.Fields.Item("galItemTitle").Value)%><font color="#FFFFFF"> <br>
$ </font><%=(rsCategoryItems.Fields.Item("galItemPrice").Value)%></td>
</tr>
<%
Repeat1__index=Repeat1__index+1
Repeat1__numRows=Repeat1__numRows-1
rsCategoryItems.MoveNext()
Wend
%>
</table>

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

knottydrd

ASKER

Let me clarify that what I mean is that I lose the orage part of the border with the image and without the image I get the orange part of the border.

M256

As I understand it, the problem is that the orange and green border on the outside of all the content is partly covered up when you put in the image.

The solution to this problem is to change the width of the cell the image is in to 100% instead of 610 pixels.
Wrong:
<td colspan="5" bgcolor="#016701" width="610" style="margin: 0; padding: 0;">
Right:
<td colspan="5" bgcolor="#016701" width="100%" style="margin: 0; padding: 0;">

Let me know if this doesn't work.

Matthew

seanpowell

You have some fairly badly structured code there - improperly nested tables, duplicate scripts, table cells that have not been closed, etc. You may be able to solve the problem you have with a minor adjustment here and there, but the site will display quite badly in non IE browsers. You really need to go back into the code and try and sort out the main issues first...

Thanks,
GM

Zontar

I agree with GM -- clean up your HTML, ditch the nested tables and superfluous DIV tags and inline styles.

ASKER CERTIFIED SOLUTION

seanpowell

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial