I've got some very weird table issues in IE6. The code is very simple:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>test</title>
<style type="text/css">
body { font-family: Arial, Helvetica, sans-serif; font-size: 10pt; }
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" bgcolor="red" width="100%">
<tr>
<td bgcolor="blue" width="425" rowspan="2">Cell 1</td>
<td bgcolor="green" width="335">Cell 2</td>
<td bgcolor="purple" width="*" rowspan="2">Cell 4</td>
</tr>
<tr>
<td bgcolor="orange">Cell 3</td>
</tr>
<tr><td colspan="3">
blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah
</td></tr>
</table>
</body>
</html>
Not exactly rocket science, is it? This is rendered as expected:
Code:
--------------------------------------------------------------------
|Cell 1 | Cell 2 |Cell 4 |
| ----------------------------- |
| | Cell 3 | |
--------------------------------------------------------------------
| blah blah blah blah blah blah blah blah |
--------------------------------------------------------------------
But as soon as I add on more 'blah' to the bottom cell (the one that spans 3 columns) the alignment goes haywire and cell 1 widens radically:
Code:
--------------------------------------------------------------------
|Cell 1 | Cell 2 |Cell 4 |
| ----------------------------- |
| | Cell 3 | |
--------------------------------------------------------------------
| blah blah blah blah blah blah blah blah blah |
--------------------------------------------------------------------
In other words, as soon as the line of text in the bottom cell straddles some mysterious limit, all width declarations for the cells above go out the window. I have this problem with IE6.0.2800.1106.xpsp2. Firefox, Mozilla and Opera render this code perfectly.
What's going wrong here, why, and what can I do about it?
(The behavior of the above HTML code may depend on your window size, font size, and what not... maybe you'll have to add or remove a few blah's in order to trigger the problem and straddle the magical boundary.)
All reactions are grealy appreciated!