Table problem

image offest by table

[pcguru333]

I have a table that is nested inside a table. The nested table contains images that are left aligned. Cellspacing and padding on both tables are set to "0". My images display fine (in IE 5) until I add a 1 pixel border to the parent table. Once the border is added it offsets my images one pixel.

Anyway to correct this?

Thanks
Dan T

[tedster]

Welcome to Webmaster World, Dan.

I haven't run into this one before, and I'm not getting that effect myself. But of course I'm not using your exact code.

Would you send me a Sticky Mail with the URL? I'll be glad to take a look. (See the Sticky Mail link at the top of this page)

[pcguru333]

I would love to give you a URL if I had one. This site is offline and it is at home. Basically it is as follows:

...
<TABLE ALIGN="CENTER" WIDTH=750 HEIGHT=550 CELLSPACING="0" CELLPADDING="0" BORDER="1" BACKGROUND="bluegila.gif">
<TR>
<TD VALIGN="TOP">
<TABLE ALIGN="LEFT" CELLSPACING="0" CELLPADDING="0" BORDER="0">
<TR><TD><IMG SRC="logo.gif" HEIGHT="160" WIDTH="150"></TD><TD><IMG SRC="plainname.gif" HEIGHT="170" WIDTH="450"></TD></TR>
</TABLE>
</TD>
</TR>
</TABLE>
...

When the parent table has the border=0 then all is well. When the border=1 then it offeset this. This is very noticeable as the images line up with the background image.

There is no other code on the page as I have just begun its design.

Thanks
Dan T

[magos]

try adding a colspan="2"

<TABLE ALIGN="CENTER" WIDTH=750 HEIGHT=550 CELLSPACING="0" CELLPADDING="0" BORDER="1" BACKGROUND="bluegila.gif">
<TR>
<TD VALIGN="TOP" colspan="2">
<TABLE ALIGN="LEFT" CELLSPACING="0" CELLPADDING="0" BORDER="0">
<TR><TD><IMG SRC="logo.gif" HEIGHT="160" WIDTH="150"></TD><TD><IMG SRC="plainname.gif" HEIGHT="170" WIDTH="450"></TD></TR>
</TABLE>
</TD>
</TR>
</TABLE>
...

[tedster]

An added comment -- if you are trying to align a foreground image with a background to the exact pixel, it's smart to look at your design on different OS before you invest too much in one direction.

Depending on your code, you especially may find significant differences between Mac and Windows.

[JuniorHarris]

The problem may be corrected by adding an additional table.

Try:

<TABLE ALIGN="CENTER" WIDTH=750 HEIGHT=550 CELLSPACING="0" CELLPADDING="0" BORDER="1" BACKGROUND="bluegila.gif">
<TR>
<TD VALIGN="TOP">
<TABLE ALIGN="CENTER" CELLSPACING="0" CELLPADDING="0">
<TR><TD>
<TABLE ALIGN="LEFT" CELLSPACING="0" CELLPADDING="0" BORDER="0">
<TR><TD><IMG SRC="logo.gif" HEIGHT="160" WIDTH="150"></TD><TD><IMG SRC="plainname.gif" HEIGHT="170" WIDTH="450"></TD></TR>
</TABLE>
</TD>
</TR>
</TD></TR></TABLE>
</TABLE>

[tedster]

If you think about it, by adding a border to the outer table, you are adding a pixel width compared to having border=0 -- so it's bound to shift things. You may need to either 1) change the graphics, or 2) drop the tables and use absolute positioning.

[pcguru333]

I thought of the border changing positioning, but I always thought that the border added to the outside of the table and didn't affect its contents. The background is also in the table and it doesn't seem affected. My problem is that I have never used absolute positioning. I guess it is time to learn.

[IanKelley]

There's a simpler answer (not to say that learning absolute positioning isn't a good idea)

Use nested tables to create a border instead of the border attribute. It looks better in netscape this way anyway.

Surround your content with a table using whatever color you want your border to be as it's background color and then set it's cellpadding to 1. Make sure to set the inner tables background color to account for broswers that inherit.

[pcguru333]

Thanks to all

2 notes...
JuniorHarris's idea for adding another table worked. And I learned absolute and relative position (which I am now using).

Again thank you for your comments