Problem with table (Opera7 and IE 5.5)

Table spacing padding in opera 7 IE 5.5

[LeeB]

Hello,

I’m new to web development and am encountering a problem with a table of images that only materialises with Opera 7 (version 7.54) and IE 5.5. In a nutshell, the second cell image is not butted right up against the edge of first cell even though the alignment is left and the spacing/padding is set to zero.

The html code:

<TABLE width="100%" class="MainHeader">
<TR>
<TD bgcolor="white" class="HeaderCell"><A href="http://example.com/detling.html" target="_blank"><IMG src="images/detling_emblem.gif" align="left" title="View info on the Detling Millenium Sign" alt="Detling Millenium Sign"></A></TD>
<TD bgcolor="#53B853" class="HeaderCell"><IMG src="images/Detling_Title.gif" align="left" alt="Detling Parish"></TD>
<TD bgcolor="#53B853" class="HeaderCell"><IMG src="images/Detling_Pics.gif" align="right" alt="Images of Detling"></TD>
</TR>
</TABLE>

CSS Code:

.HeaderCell,
.MainHeader
{
PADDING-TOP: 0px;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
PADDING-RIGHT: 0px;
MARGIN: auto;
BORDER-RIGHT: 0px;
BORDER-TOP: 0px;
BORDER-LEFT: 0px;
BORDER-BOTTOM: 0px;
BORDER-COLLAPSE: collapse;
border-spacing: 0;
}

.MainHeader
{
height: 70px;
}

Many Thanks
LeeB

<Sorry, no personal URLs.
See Terms of Service [webmasterworld.com]>

[edited by: tedster at 1:09 am (utc) on Mar. 23, 2005]

[tedster]

Hello LeeB, and welcome to the forums.

There are different causes for what looks like the same behavior in IE 5.5 and Opera 7.54.

First, note that the align attribute is deprecated - and if you are using a full DTD, then Opera will (rightly) ignore any deprecated attributes.

What you are looking for is a rule that aligns the content within the table cell - the <td> element. But your mark-up gives an align attribute to the <img> element instead, rather than to the <td>. Try working with text-align:left for the <td> elements.

Even before it was deprecated, I saw a lot of markup where the author was confused about the align atttribute. When the align attribute is applied to an <img> tag, it FLOATS the image left or right and then wraps the other content around the image. It's not just "push it all the way to the left."

Also note that you have three different elements interacting in this layout: an anchor tag, image tags, and table cells. You'll need to have CSS rules for all those elements to avoid having some browser or other apply default margins and/or padding.

[LeeB]

Code corrected as per your comments, many thanks.