Table rendering/alignment, IE vs. Mozilla

This must be a FAQ, but I cannot find it

[Daniel_E]

Hi! I'm pretty new to web development, and I'm very new to this forum. I've spent the last hour or so looking for a possible explanation (or solution) to what I'm sure is a stupid user error on my part. So far I've come up empty-handed.

My problem is that a table of mine (or rather a nested table) refuses to render with proper alignment of the cells in Internet Explorer (6). The same page renders just fine in Mozilla.

The page in question: <sorry, no links to personal pages>

The problematic cell is the one containing the small icon in the top left corner of every article. In Mozilla it correctly renders the cell around the image, but IE seems to render the cell width differently each time I change the code.

Can anyone see any obvious problems or mistakes?

Thank you!

/Daniel

[edited by: tedster at 11:25 am (utc) on June 12, 2003]

[outrun]

Quick fix to your problem, (I got to look at the link before it was removed). Set your Green tables width to 100%, if your not sure of the syntax
<td bgcolor="#66CC99" width="%100">

Although long term you could set out your tables better.

regards,
Mark

[tedster]

Daniel_E, welcome to the forums.

One of the issues here is that browsers are not required (W3C standards) to follow table or cell width/height attributes to the exact pixel. In fact, user agents are given great latitiude in how they deal with such instructions, as they must if they are not to get crashed by conflicting instructions in different parts of the table.

If table cells need to be perfectly lined up in columns, then the only sure thing is that they need to be part of the same table. Placing an image in a cell only guarantees that the cell will be at LEAST that wide - and even if you give the TD an exact pixel width, it may still be rendered wider than that.

So outrun's idea about making another cell on the same line be width="100%" makes sense. If you only have two cells in the row, that approach "should" force the other cell's width down to the width required to display image.