Table/Text Inconsistencies between FF & IE6

[gumboots3]

Hey All,

I know this is a common problem, but I haven't been able to clear it up by searching the forums or Google.

I have a simple website with a significant difference in the render of tables between FF and IE6.

Here is the site:

<link removed>

Here is a comparison shot between FF and IE6:

<link removed>

I'm using Dreamweaver to draw the tables, and it is more or less WYSIWYG with FF, but it just doesn't agree with IE.

I have tweaked and manually input the cell pixel values, but nothing seems to work. Often, it just makes it worse.

Any suggestions would be greatly appreciated!

Thanks,

Matt

[edited by: incrediBILL at 2:11 pm (utc) on July 3, 2009]
[edit reason] removed URLs, see TOS #13 [/edit]

[incrediBILL]

What looks different in IE than FF?

You may post your table HTML here as long as you remove any links or text that point back to your site and we'll see if we can tell what's wrong.

[gumboots3]

Hey, thanks for the response... I didn't realize that the forum removed the links.

It's a small icon with a cell to the right of it containing text. In FF, the spacing renders well. In IE6, the text table is bumped way over to the right, creating lots of extra space between the icon and the text, and also throwing off the spacing of the larger table it is within.

Here's the snippet that seems to be the issue:

<td height="286" rowspan="2">&nbsp;</td>
 <td width="65" height="64" align="left"><img src="graphics/L-button.jpg" width="60" height="60"></td>
 <td width="361" height="64" align="left">
<p><font size="2" face="Arial, Helvetica, sans-serif"><strong>orem Ipsum</strong> dolor sit amet, consectetur adipiscing elit. Donec at mi mi, ac tincidunt diam. Duis eget dolor mauris. Nulla facilisi. Aliquam nunc turpis, hendrerit non sollicitudin vitae, tincidunt iaculis odio.</font></p>

Thanks for any insight!

[edited by: tedster at 10:34 pm (utc) on July 4, 2009]
[edit reason] replace specific text with Lorem Ipsum [/edit]

[tedster]

The doctype might well be a factor. This kind of images-in-table-cells problem is common in IE6 when the page uses quirks mode rendering - see [webmasterworld.com...]

Thinking about the visual effect you are trying to achieve, you might have better cross-browser results by not placing the icon in its own table cell. Instead place it with the text but float it to the left, with however much right margin you want to see.

<img src="graphics/L-button.jpg" width="60" height="60" style="float:left;margin-right:7px;"><strong>orem Ipsum</strong> dolor sit amet, consectetur adipiscing elit.

[edited by: tedster at 12:07 am (utc) on July 11, 2009]

[gumboots3]

Superb! Thank you so much! The "float" style works beautifully and consistently on all browsers. What a nifty trick!

Thanks again for your insight and time!