IE table column pixel width problem on colspan Options

[Athca]

Hi,
I have a table with four columns and some rows.
First and third columns have a class.
When I make colspan to second,third and fourth column for any row no problem occurs till giving a long text to colspaned column.

Here is an example HTML page : http://www.webnero.com/test.html

You can see 4 Sample table.

First table is a standart table with short text on colspaned column
Second tables code is exactly same with first one but the text is much longer.
You can see the problem on second table.
When I add attribute cols to table, on first load it seems ok but after refreshing the page it looks like second table.
the forth table is as same as second table but the class of the first and second columns are different and the width is on percent parameter.

The problem occurs on IE6 and IE7
Firefox is ok.

I don't want to use Javascript (I can fix it using js but it shouldn't be the solution)
I must use class. because thousands of page uses this table structure. So I should change the with with css.
I can't use percent because the with of the content may change according the page.

I searched so much about this problem but couldn't find a solution.

Thanks for your help.

[Christian J]

CODE

table {table-layout: fixed;}

seems to fix it in IE7.

[Athca]

CODE

table {table-layout: fixed;}

seems to fix it in IE7.

Thanks Christion J,
But I tried that before. It leaves the first column on the size that we mensioned but make other columns width equal.
So third column size couldn't match with first one.

You can see the result : http://www.webnero.com/test2.html

[Christian J]

Sorry, I just compared with the first table and didn't notice that it was affected by the "table-layout" too.

But since you only specify a width for the 1st and 3rd cells, how will a browser know how to distribute the remaining table width on the cells with undefined width values?

OTOH IE definately seems buggy, since the text in the gray cells is supposed to be right-aligned. If you insert the COLS attribute with JS it seems to work better than when it's hard-coded (but it still falls apart if I change user text size).

[Athca]

If I don't give a width to a column browser set widths by an algorithm according to the length of the texts in the columns.
This works great in the forth sample . The problem is pixel widths.

Yes IE is buggy I tested on IE6 and IE7 both same.

[Christian J]

Giving cells a default width of zero seems to fix the second table in IE7:

CODE

<!--[if IE]>
<style type="text/css" media="screen, print">
td {width: 0;}
</style>
<![endif]-->
<style type="text/css" media="screen, print">
.label{
    background:#ccc;
    width:150px;
    text-align:right;
}
</style>

This also seems to work in my other browsers except newer(?) Firefox/Gecko, but I guess it's safest to let IE only see it.

[Athca]

Thanks Christian J,
This works great both IE6 & IE7, Its also ok for Firefox2

I update the test.html.

Sample 5 is the one.

Thanks again Christian, you are great, I realy appreciate for your help.

[Christian J]

This works great both IE6 & IE7, Its also ok for Firefox2

I update the test.html.

Sample 5 is the one.

Yes it was Firefox3 that didn't like the bugfix.

I'm a bit worried about exposing future IE versions to the bugfix though. If someone has access to IE8 (currently in beta version) I'd like to know how it behaves (both with and without the bugfix).

Thanks again Christian, you are great, I realy appreciate for your help.

You're welcome!

[pandy]

http://browserpool.com

[Christian J]

Thanks pandy! I suppose that's IE8 that doesn't even work with the bugfix? In fact it looks very much like FF3's rendering...

[pandy]

I suppose that's IE8

That's what you asked for.