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:
CODE
<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.
