Welcome to WebmasterWorld Guest from 22.214.171.124
Forum Moderators: open
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">
<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>
<Sorry, no personal URLs.
See Terms of Service [webmasterworld.com]>
[edited by: tedster at 1:09 am (utc) on Mar. 23, 2005]
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.