IE6 Breaking my Tables with Image

[the.ronin]

Hi Everyone,

I’ve been banging my head trying to get my site compatible with the more popular browsers. The one that’s giving me quite a headache is IE6. Since pictures are worth a thousand words, here goes …

What it’s supposed to look like (FF2, FF3, IE7, Chrome, Safari all look like this):

What it looks like in IE6:

I suspect it is IE6 not respecting the table widths in the html. It bears noting that an image resizing script is being run. In the forums, that image is resized perfectly to the width of the forum. The page shown is driven by multiple php files which output to html pages. However the following is the shell html code which houses the main content area. I’ve truncated it here for reference:

<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
	<td style="width:2px;" valign="top"></td>

<!-- [+] center block area -->
	<td valign="top">
	<br style="clear:both" />

	<!-- [+] THIS IS WHERE THE MAIN CONTENT & PHOTO WOULD GO -->

	</td>
                         
<!-- [-] center block area -->
	<td style="width:4px;" valign="top"> </td>

<!-- [+] right block area -->
	<td valign="top" style="width: {PORTAL_RIGHT_COLUMN}px; padding-left:6px;">
		<br style="clear:both" />

	<!-- [+] THIS IS WHERE THE THE SMALLER MODULE BLOCKS WOULD GO -->

	</td>
<!-- [-] right block area -->
</tr>
</table>

I have tried setting the table width =”800” as well including a style+”width:550px” in the td tags with little success. Fixing the widths reduces the content area and forces the image to resize accordingly. However, the spacing of the areas are still broken up as in the image above – the content area is just narrower. I hope that makes sense.

Any advice would be extremely appreciated.

 

[webmasterdan]

I suggest diagnosis yourself via a copy that you can freely mess with. Strip out most of the content. Try specifing css widths only, or tables widths only. Also perhaps try specifing the width of the main columns?

 

[conor]

image re-sizing is a bad idea. I have seen people upload a 3mb image and resize it to 100px x 100px! Maybe thats not the case with you, but i still recommend changing the image to the size you want.

As for the layout. IE6 is notoriously bad with tables. I see that your Table width is 100%. ie6 has allways had a problem recognising that. Change it to a fixed width. If you only want to do that for ie6 then create an extra stylesheet that only loads for ie6.

Just to note. Most of those style should be applied with CSS rather than HTML.

 

[the.ronin]

Thank you for the replies guys ... for now I think I will try to recreate the page with a more simple table format. I had actually had any linked images (I don’t allow uploads) to be limited to 550px which is the width of the content area. The resizer provides much more freedom and everyone really likes it. Oddly enough, the resizer works fine in the forums in IE6, just not in the home page. This leads me to believe it is in fact the table configuration since the main forums do not use tables.

 

[Geodun1]

Thank you for the replies guys ... for now I think I will try to recreate the page with a more simple table format. I had actually had any linked images (I don’t allow uploads) to be limited to 550px which is the width of the content area. The resizer provides much more freedom and everyone really likes it. Oddly enough, the resizer works fine in the forums in IE6, just not in the home page. This leads me to believe it is in fact the table configuration since the main forums do not use tables.

Switching to a div based layout might help if it works in your forums.