Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ IE table column pixel width problem on colspan

Posted by: Athca Oct 8 2008, 07:10 AM

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.





Posted by: Christian J Oct 8 2008, 09:02 AM

CODE
table {table-layout: fixed;}


seems to fix it in IE7.

Posted by: Athca Oct 8 2008, 09:36 AM

QUOTE(Christian J @ Oct 8 2008, 04:02 PM) *

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


Posted by: Christian J Oct 8 2008, 02:16 PM

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

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).


Posted by: Athca Oct 9 2008, 02:07 AM

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 smile.gif I tested on IE6 and IE7 both same.



Posted by: Christian J Oct 9 2008, 09:52 AM

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.

Posted by: Athca Oct 10 2008, 01:19 AM

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.

Posted by: Christian J Oct 10 2008, 07:42 AM

QUOTE(Athca @ Oct 10 2008, 08:19 AM) *

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).

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

You're welcome! happy.gif

Posted by: pandy Oct 10 2008, 10:00 PM

http://browserpool.com

Attached Image



Posted by: Christian J Oct 11 2008, 10:17 AM

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

Posted by: pandy Oct 11 2008, 04:07 PM

QUOTE(Christian J @ Oct 11 2008, 05:17 PM) *

I suppose that's IE8

That's what you asked for. rolleyes.gif

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)