Interesting table behavior in IE6

frankvw · #1 (**permalink**) 03-22-2005, 08:52 AM

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!

lafilledanse · #2 (**permalink**) 03-22-2005, 10:29 AM

im not sure this is what you want but i think what you'e missing is "colspan". cell 1 to cell 4 should be set to colspan=1 and the blah blah cell to colspan=3.

if your cell 1 widens to the length of the text of the blah cell, then that should be whats going to resolve your problem.
have you tried to make a border to the table to see how the cells react (border=1) ?

hope this will help

lafilledanse · #3 (**permalink**) 03-22-2005, 10:32 AM

oops ive just reread your code and i havent noticed you used colspan

i guess my advice is kind of useless then sorry...