The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> IE table column pixel width problem on colspan
Athca
post Oct 8 2008, 07:10 AM
Post #1





Group: Members
Posts: 4
Joined: 8-October 08
Member No.: 6,841



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.




User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 8 2008, 09:02 AM
Post #2


.
********

Group: WDG Moderators
Posts: 7,634
Joined: 10-August 06
Member No.: 7



CODE
table {table-layout: fixed;}


seems to fix it in IE7.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Athca
post Oct 8 2008, 09:36 AM
Post #3





Group: Members
Posts: 4
Joined: 8-October 08
Member No.: 6,841



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

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 8 2008, 02:16 PM
Post #4


.
********

Group: WDG Moderators
Posts: 7,634
Joined: 10-August 06
Member No.: 7



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

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Athca
post Oct 9 2008, 02:07 AM
Post #5





Group: Members
Posts: 4
Joined: 8-October 08
Member No.: 6,841



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.


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 9 2008, 09:52 AM
Post #6


.
********

Group: WDG Moderators
Posts: 7,634
Joined: 10-August 06
Member No.: 7



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Athca
post Oct 10 2008, 01:19 AM
Post #7





Group: Members
Posts: 4
Joined: 8-October 08
Member No.: 6,841



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 10 2008, 07:42 AM
Post #8


.
********

Group: WDG Moderators
Posts: 7,634
Joined: 10-August 06
Member No.: 7



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 10 2008, 10:00 PM
Post #9


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,667
Joined: 9-August 06
Member No.: 6



http://browserpool.com

Attached Image


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 11 2008, 10:17 AM
Post #10


.
********

Group: WDG Moderators
Posts: 7,634
Joined: 10-August 06
Member No.: 7



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...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 11 2008, 04:07 PM
Post #11


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 17,667
Joined: 9-August 06
Member No.: 6



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

I suppose that's IE8

That's what you asked for. rolleyes.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 23rd September 2017 - 09:40 AM