Deprecated: Function set_magic_quotes_runtime() is deprecated in /home4/mfoster/public_html/cb/forums/include/common.php on line 62

Warning: Cannot modify header information - headers already sent by (output started at /home4/mfoster/public_html/cb/forums/include/common.php:62) in /home4/mfoster/public_html/cb/forums/header.php on line 31

Warning: Cannot modify header information - headers already sent by (output started at /home4/mfoster/public_html/cb/forums/include/common.php:62) in /home4/mfoster/public_html/cb/forums/header.php on line 32

Warning: Cannot modify header information - headers already sent by (output started at /home4/mfoster/public_html/cb/forums/include/common.php:62) in /home4/mfoster/public_html/cb/forums/header.php on line 33

Warning: Cannot modify header information - headers already sent by (output started at /home4/mfoster/public_html/cb/forums/include/common.php:62) in /home4/mfoster/public_html/cb/forums/header.php on line 34
Cross-Browser.com / [xTableHeaderFixed] columns are wrong in IE if border-collapse is on

Cross-Browser.com

X Library Forums

You are not logged in.

Announcement

New user registration is currently disabled.

  • Index
  •  » X Library
  •  » [xTableHeaderFixed] columns are wrong in IE if border-collapse is on

#1 January 5, 2010 9:59:42 am

ben.spiller
New Member
From: Cambridge, UK
Registered: January 4, 2010
Posts: 3

[xTableHeaderFixed] columns are wrong in IE if border-collapse is on

Thanks for the awesome library!

I love xTableHeaderFixed but I'm having real trouble getting it working in my application, because my table has the border-collapse:collapse style. It works fine in FireFox but in IE7/8 the column widths of the fixed header are wrong so it looks fairly bad (especially noticeable if you set a large border like 15px, and column header text of varying length). I know there was a post related to this attached to a previous thread, but I thought it would be clearer to create a new one to focus on just this issue.

It looks as though the problem is the xWidth function, which should only add half of the (border-left+border-right) in Internet Explorer (but continue to add the whole thing for browsers like FF). Are there any plans to fix this? The xWidth function is used in other places too, so presumably there could be other rendering bugs too if anyone is using border-collapse? If not, would you mind adding a release-note on the xTableHeaderFixed and xWidth pages so people know they shouldn't try to use them with border-collapsing tables? It took me quite a while to get to the bottom of the problem.

To avoid the border-collapse problem without creating ugly tables, I notice that the X library demos use a workaround in which border-collapse is turned off, and instead you set CellSpacing=0 and only set the border on one side of the cell not both. I'd love to use this technique on my app but my table is an asp.net table and for some reason the crazy MS developers have hardcoded the table to set border-collapse:collapse with no way to turn it off - unless (wait for it...) you set CellSpacing=-1! So this workaround is totally thwarted. yikes( So if there's any way the border-collapse bug could be addressed it would be a huge help, though I recognise it may not be so easy.

Thanks for all the time you put into this!
Ben

Offline

 

#2 January 5, 2010 4:13:14 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xTableHeaderFixed] columns are wrong in IE if border-collapse is on

Hi Ben, welcome to the forums!

I'm tied up with some work stuff right now, but I'll post back a little later today.

Thanks!

Offline

 

#3 January 6, 2010 10:20:42 am

ben.spiller
New Member
From: Cambridge, UK
Registered: January 4, 2010
Posts: 3

Re: [xTableHeaderFixed] columns are wrong in IE if border-collapse is on

I've made some progress by abandoning attempts to get border-collapse to work for the time being. (nb: it would still be great to at least document that it's not supported)

With border-collapse I got perfect results in FireFox and Chrome but pretty bad results in IE. However I can get reasonable results in all browsers by turning all borders off and instead using CellSpacing=1 for my borders (setting the table's background color to the desired border colour). ASP.NET also seems happy to allow me to have no border-collapse setting in my asp:table if I set CellSpacing=1.

However with this approach I'm still seeing mis-alignment of the fixed header columns by 1 or 2 pixels in all browsers. I think I can persuade my customer to overlook this, but if there was a way of getting it perfect (either with the CellSpacing=1 workaround, or with border-collapse:collapse) that would be brilliant.

FYI in my testing I've added some code to xFixedTableHeader to check the offsetWidth of each fixed th against the original th just after the call to xWidth that supposedly sets them to be the same; I make it display an alert if there's a difference so I can see whether it's working or not, and how much it's off by. I just wish I knew how to get the column headers exactly the same!

Offline

 

#4 January 6, 2010 1:22:07 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xTableHeaderFixed] columns are wrong in IE if border-collapse is on

Hi Ben,

Thanks very much for your work on this! As you saw from the other thread, myself and others have been playing around with this for quite some time. I've just about had to accept that the header columns will never be perfectly aligned. It seems that there are a multitude of factors which affect it.

Regarding border-collapse, it seems that different browsers implement it in different ways (not surprising) - I've got some notes about that around here somewhere, I'll have to look them up. However, I also gave up on trying to not use border-collapse. I have some tables where there is just no other way I can get it to look like I need it to without using border-collapse.

So the saga continues smile

You have a good idea there about xWidth taking border-collapse into consideration. I'll be looking into that. I notice that the 3 demos do not use border-collapse... I probably need to have demos which do so I can test with and without using it. I'll be thinking on these things and trying out some ideas.

Offline

 

#5 January 12, 2010 12:53:48 am

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xTableHeaderFixed] columns are wrong in IE if border-collapse is on

I've been looking into this some, and experimenting a little. Hopefully I'll have something more concrete to post soon.

Offline

 

#6 January 12, 2010 2:16:05 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xTableHeaderFixed] columns are wrong in IE if border-collapse is on

Here's a test page I've been experimenting with.

If it was the situation where IE implements border-collapse: collapse differently than the other browsers (as is usually the case) it would be easy to accommodate it - we could use JScript conditional compilation. However, that is not the case here. In fact, we see Firefox doing something very different from the other browsers - and it seems to be a logical solution - but I've always thought it was extremely odd for Firefox to return floating-point numbers for the computed style of 'width'. Still, only Firefox returns what seem to be the actual computed values for the border widths.

The only type of browser-detection used in the X Library is window.opera (to detect Opera) and JScript conditional compilation (to detect IE). I really don't want to have to resort to using the userAgent string. This requires more investigation and testing.

[edit] Hmmm... It's been so long since I did any sniffing I had almost forgotten about navigator.product == 'Gecko' ... something to keep in mind, but I'll try to find a way to do it without sniffing first.[/edit]

Last edited by MikeFoster (January 15, 2010 1:44:49 am)

Offline

 

#7 January 14, 2010 10:29:49 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xTableHeaderFixed] columns are wrong in IE if border-collapse is on

Unfortunately it looks like, according to CSS 2.1, Firefox is the non-conformant browser here. With this CSS...

table {
  border-collapse: collapse;
  border: 7px solid #900;
}
td {
  border: 3px solid #000;
}


...Firefox gives computed styles for the border widths of the TDs as left=3,right=2 and left=1,right=4 for the leftmost and rightmost TDs and left=1,right=2 for the inside TDs. For the table's left and right borders it gives 0 for both. On the the same test page, Chrome, IE7&8, Opera and Safari all give 3 for all TD border widths and 7 for the table's border widths. So, even tho I think Firefox's implementation is more logical, it is still very different from the other browsers' implementation and so presents us with a big problem.

The problem this creates for xWidth is not in regards to getting a TD's width, because that is just the offsetWidth property, but the problem is in setting the width (the same applies for xHeight). This is because xWidth tries to provide, effectively, a read/write version of the native offsetWidth property (which is read-only), and so it must subtract the existing padding and border widths from the target width before assigning it to the style.width property. This means xWidth must (as Ben mentioned above) divide the border widths by 2, but only when the browser is not Firefox, and only when it is setting the width of a TD or TH, and only when the table itself has border-collapse: collapse ... yuck!!!

I'm trying to think of alternatives, so right now I'm taking a look at offsetWidth - clientWidth ... stay tuned smile

Offline

 

#8 January 15, 2010 4:29:41 am

ben.spiller
New Member
From: Cambridge, UK
Registered: January 4, 2010
Posts: 3

Re: [xTableHeaderFixed] columns are wrong in IE if border-collapse is on

Those browser vendors have made it pretty messy for us though, haven't they? Keep up the good work! 

If only someone could make the CSS specs legally enforceable, millions of web developers would rejoice :-)

Offline

 

#9 January 15, 2010 11:20:17 am

theseeker
Member
Registered: December 11, 2009
Posts: 24

Re: [xTableHeaderFixed] columns are wrong in IE if border-collapse is on

Ben,

I've had better luck in using xTableHeaderFixed in asp.net with the ListView control rather than the asp:table control. I have continued to use Mike's cellspacing=0 and border-bottom+border-left workaround, but that is easy to set in CSS. I do hope Mike can figure out how to make the table header render properly with border-collapse on, as it would make my life easier also, but this stuff is extremely complicated (and different from browser to browser).

Anyway, here's the listview code I'm using in case it helps:

<asp:ListView ID="ListView1" DataSourceID="yourData" runat="server" DataKeyNames="yourKey">
<LayoutTemplate>   
<table class="xthf" cellspacing="0">         
  <thead>
    <tr>     
      <th><asp:Literal ID="Header1" runat="server" /></th>
      <th><asp:Literal ID="Header2" runat="server" /></th>
      <th><asp:Literal ID="Header3" runat="server" /></th>
      <th><asp:Literal ID="Header4" runat="server" /></th>
    </tr>
  </thead>
  <tbody>
    <tr id="ItemPlaceHolder" runat="server"></tr>
  </tbody>       
</table>
</LayoutTemplate>     
<ItemTemplate>           
  <tr>
    <td><asp:Literal ID="DataColumn1" Text='<%#Eval("Column1")%>' runat="server"/></td>
    <td><asp:Literal ID="DataColumn1" Text='<%#Eval("Column2")%>' runat="server"/></td>
    <td><asp:Literal ID="DataColumn1" Text='<%#Eval("Column3")%>' runat="server"/></td>
    <td><asp:Literal ID="DataColumn1" Text='<%#Eval("Column4")%>' runat="server"/></td>
  </tr>
</ItemTemplate>
<EmptyDataTemplate>
    There is no data at this time!
</EmptyDataTemplate>
</asp:ListView>

Offline

 

#10 January 15, 2010 3:29:48 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xTableHeaderFixed] columns are wrong in IE if border-collapse is on

LOL @ ben.spiller, rejoice indeed! big_smile

Hi theseeker, thanks very much for the ASP.NET tips!

Now for an update...

I've just uploaded some big changes! There are now 6 demos - 3 that simulate collapsed borders and 3 that actually use border-collapse:collapse. All 6 demos are using experimental versions of xWidth and xTableHeaderFixed. In xWidth I'm using offsetWidth - clientWidth to get the combined left and right border widths. I expected the result of that subtraction to be the combined left and right widths for borders and padding - but no - it is just the widths of the borders... and it is not always precise, but usually pretty dang close.

Some strange things happen as a result of using border-collapse:collapse. The left edge of the table is now in the center of the table's left border - and Firefox doesn't add half the table's border widths to the width of the table. You'll see strange renderings due to this especially in Firefox and Chrome. In addition, if the table has overflow:hidden it will modify these strange renderings - for good in Firefox (it hides the border overflowing on the left), for bad in Chrome (it shifts the table to the right).

IE and Opera also have quirks related to using border-collapse:collapse. Originally I was using ele.style.display to show/hide the fixed header, but this caused IE to display the TH's borders (just the borders, not the rest of the header table) when it was not supposed to be visible. So I started using ele.style.visibility to show/hide the fixed header, but this caused Opera and Safari to not display the TH's borders when they were supposed to be visible. Sheesh! Currently, to hide the fixed header I simply move it offscreen with ele.style.left = '-2000px', and this seems to work ok.

So, there are still several issues to be worked out. Stay tuned for more!

Offline

 

#11 January 20, 2010 11:04:22 am

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xTableHeaderFixed] columns are wrong in IE if border-collapse is on

I feel that I've made great progress towards understanding how the different browsers implement border-collapse:collapse. In the version of xWidth that I'm using in the demos I am now using offsetWidth - clientWidth to determine left and right border widths for all cases, not just for collapsed borders - and I'm thinking that this might work well for all elements, not just TDs and THs - but I have to do more testing on this idea. Additionally, I'm now not explicitly setting the width of the fixed header table. I set the widths of all THs and let the width of the table adapt on its own.

Currently, the two "problem" browsers are Firefox and IE8 (and this problem is only seen in demo table 3 - the one with colspan'd THs), and I'm thinking it is related to the way they have outside table cells sharing their outside border widths with their neighboring table border. It is my observation that IE8 and Firefox implement collapsed borders in much the same way. However, Firefox doesn't hide this from us - it gives us the actual computed values - whereas IE8 hides this information from us.

What's the use of a standard if being "conformant" means the browser exposes illogical and misleading values to the programmer? Firefox takes the high road here and does the right thing. So, while IE8 may conform to the letter of the standard, and Firefox does not - Firefox, IMO, conforms to the spirit of the standard. Therefore I applaud the Firefox developers. Perhaps what is really being revealed here is that the "standard" is what is illogical - or at least, incompletely specified. But I do admit that this issue of collapsed borders is very difficult.

Nevertheless, Firefox's and IE8's implementations seem to imply that we have to handle outside cells differently than inside cells - and this is a real problem. I hope I'm wrong about this - it needs much more testing. And what should we say about WebKit browsers? Even tho they expose values the same as IE8 it is clear that their underlying implementation must be different - because the new xTableHeaderFixed just works in those browsers - it simply just works, no fuss. And in Opera too, it works very well, but in Opera we must use (offsetWidth - clientWidth) / 2 even with borders that are not collapsed. This seems strange and I have yet to do much more testing in Opera.

Offline

 

#12 January 27, 2010 5:51:24 pm

Charles Belov
New Member
From: San Francisco
Registered: July 20, 2009
Posts: 7
Website

Re: [xTableHeaderFixed] columns are wrong in IE if border-collapse is on

Mike -

I'm glad to see you are keeping this up to date. I have a monster table that may get me to finally implement this, several years after I initially broached the topic. In the meantime, I've been making use of much of the X Library as you know.

This thread, despite the title, seems to involve both Firefox and IE issues, so I'll forge ahead with this post since that's the one you've linked to from the demo page. It's unfortunate that Firefox and IE8 are showing problems, since IE8 is the most current IE8, with its share rising rapidly for us among our IE customers and Firefox has close to 50% of our Web site traffic (in San Francisco).

I've tested http://cross-browser.com/x/examples/xthf1.php aka Demo 6 in the following browsers and note:

Firefox 3.6 Windows using default settings:

All three tables work beautifully provided the browser window is open wider than the table. However, if the browser is open such that the content area is narrower than the table contents can fit in, the table contents of tables 2 and 3 get cut off. (Which kills my ability to use it for my monster table, which has 19 columns and might only fit without horizontal scrolling on a maximized window in an Apple Cinema display.)

IE7 displays this behavior for all three tables, and additionally on a too-narrow window does not align the scrolled headings properly with the body columns.

I typically run Firefox with a minimum font size of 18 point Verdana. If the window is too narrow to fit the entire table, this setting for Firefox displays the same column misalignment issue that IE7 does with default settings.

Safari 4.0.4 Windows also displays the IE behavior (I know this is not a common browser on the Windows side, but as far as I can tell it agrees with Mac side behavior, and is in common usage on the Mac side, so it will let you test Mac better than you previously could if you are not already using it).

Demo 2 behaves similarly to Demo 1.

Demo 3 has a wierd fail for me in Firefox 3.6 involving the scroll bar. Attempting to drag either scroll bar drags a ghost of the iframe instead. The scroll buttons, however, work properly. (However, that behavior seems to have disappeared, so perhaps it was a latency issue.) Still, if the iframe  isn't wide enough to accomodate the table (as happens with table two with a minimum font size of 18 points), the heading spills out of the iframe upon scrolling and the headings don't line up. But at least there is a horizontal scroll bar so the data doesn't get cut off.

Similarly, if the iframe is wide enough but the outer window isn't, then the columns don't line up between header and body upon scrolling.

Demo 4 behaves similarly to Demo 1.
Demos 5 and 6 behaves similarly to Demo 3.
Demo 6 gets the ghosting on initial scroll as well, and again this behavior eventually disappears.

I note that the deprecated Catfish version works just fine in all three browsers, so I am going to try using that. Thank you for keeping the Catfish alive.

Hope this helps,
Charles Belov
SFMTA Webmaster


SFMTA Webmaster
http://www.sfmta.com/webmaster

Offline

 

#13 January 27, 2010 8:21:02 pm

Charles Belov
New Member
From: San Francisco
Registered: July 20, 2009
Posts: 7
Website

Re: [xTableHeaderFixed] columns are wrong in IE if border-collapse is on

Just noticed one other thing. If the table rows have named anchors, clicking a link to one of the anchors scrolls that anchor underneath the floating heading row. Ouch! But if I have to choose one or the other, I will definitely take the fixed headings.


SFMTA Webmaster
http://www.sfmta.com/webmaster

Offline

 

#14 January 28, 2010 9:13:48 am

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xTableHeaderFixed] columns are wrong in IE if border-collapse is on

Hi Charles! It's great to hear from you. Thanks very much for the test report - I'll be going over it and utilizing it asap.

Offline

 

#15 February 1, 2010 2:04:38 pm

Charles Belov
New Member
From: San Francisco
Registered: July 20, 2009
Posts: 7
Website

Re: [xTableHeaderFixed] columns are wrong in IE if border-collapse is on

In an earlier post, you asked about dropping IE 6 support. One piece of Web access I use is an embedded system which provides IE 6 as the only browser. Only the embedded system vendor can choose to upgrade. So I believe graceful degredation is the answer.

It may be a moot point, however. My implementation of the feature, using the Catfish version at http://www.sfmta.com/cms/rbudgjan2010/servicetable.htm, inadvertently does not allow scrolling the page at all in IE 6, horizontally or vertically, on that embeded system. So perhaps IE 6 is already not supported, or its support is so easily broken that it is not worth it to support.

I will be changing the code, probably today, to use conditional comments to not execute the Fixed Table header code if the visitor is using IE 6. That is, the visitor will get a scrollable, usable page but without the fixed table headers.

On a separate issue, xthf seems to be written such that all tables with thead sections will be supported. But the appLoad and appUnload functions imply that I must specify each table. I have no need for each table to have a different design sceme; in fact, I want to enforce a uniform design scheme, don't need to separately style the tables and would like this support for all tables having thead sections site-wide without having to add code to each page to do so. So how do I generalize the code? Could you please add an example for that?

Hope this helps,
Charles Belov
SFMTA Webmaster


SFMTA Webmaster
http://www.sfmta.com/webmaster

Offline

 

#16 February 1, 2010 10:05:54 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xTableHeaderFixed] columns are wrong in IE if border-collapse is on

It sounds like the catfish may not work on that embedded IE.

I've made a change to the demos:

The tables in demos 1 and 2 have different styling so an xTableHeaderFixed object is instantiated for each table.

The tables in demos 4 and 5 have the same styling so only one xTableHeaderFixed object is instantiated.

Offline

 

#17 February 2, 2010 12:21:43 pm

Charles Belov
New Member
From: San Francisco
Registered: July 20, 2009
Posts: 7
Website

Re: [xTableHeaderFixed] columns are wrong in IE if border-collapse is on

Thanks!

Unfortunately, I can't use the code in example 4 (or any non-Catfish example) until the issue with no horizontal scrollbar on too-wide tables is fixed. When I try to implement the generic styling in Catfish by replacing:

<![if gte IE 7]>
var addBehavior = false, ss = '../styles/xthf0.css';
if (window.XMLHttpRequest) {
  addBehavior = true;
}
else {
  /*@cc_on
  @if (@_jscript_version == 5.6) // IE6
  ss = '../styles/xthf0_ie6.css';
  addBehavior = true;
  @end @*/
}
if (addBehavior) {
  var e = document.createElement('link');
  e.rel = 'stylesheet';
  e.type = 'text/css';
  e.href = ss;
  document.getElementsByTagName('head')[0].appendChild(e);
  xAddEventListener(window, 'load', appLoad, false);
  xAddEventListener(window, 'unload', appUnload, false);
}

function appLoad()
{
  window.xthf1 = new xTableHeaderFixed0('xthf-con-site', 'xthf-tbl-site', 'leftColumn', 1, 1, 'table1');

}

function appUnload()
{
  if (window.xthf1) { xthf1.unload(); }
}
<![endif]>



with

<![if gte IE 7]>
<script type='text/javascript'>
  var e = document.createElement('link');
  e.rel = 'stylesheet';
  e.type = 'text/css';
  e.href = '../styles/xthf0.css';
  document.getElementsByTagName('head')[0].appendChild(e);
xAddEventListener(window, 'load',
  function() {
    new ('xthf-con-site', 'xthf-tbl-site', 'leftColumn', 1, 1);
  }, false
);
</script>
<![endif]>



I get the error "1 is not a constructor" for the line

new ('xthf-con-site', 'xthf-tbl-site', 'leftColumn', 1, 1);



By the way, I found I got more aesthetic results (less alignment mismatch) in Firefox 3.6 and IE 7/8 if I replaced

xLeft(fh, tx - sl);


in xTableHeaderFixed0 with

xLeft(fh, tx - sl + 1);


Alas, this does not help things in Safari, but that's life in a cross-browser world.

This is not urgent as I will wait until the horizontal scrollbar issue is fixed in the current, non-deprecated code before I try to implement this code site-wide.

Hope this helps


SFMTA Webmaster
http://www.sfmta.com/webmaster

Offline

 

#18 February 3, 2010 8:37:04 pm

MikeFoster
Administrator
From: Alabama, USA
Registered: April 27, 2007
Posts: 874
Website

Re: [xTableHeaderFixed] columns are wrong in IE if border-collapse is on

Hi Charles,

Thanks very much! I'm afraid I haven't had much time for this project lately. I'll be getting back into it soon.

Offline

 
  • Index
  •  » X Library
  •  » [xTableHeaderFixed] columns are wrong in IE if border-collapse is on

Board footer

Powered by PunBB 1.2.15
Copyright © 2002–2005 Rickard Andersson

Expand Restore Select Format Eval Load