stickheaders - offset/margin

[thezoggy]

noticed that with the latest stickyheaders.. you are specifying the width then trying to offset the border.. so what we end up is something that is slightly larger than before and -1px to the left.. which is just really off. if i do -2px margin-left and turn off your width statement things look good. its a box sizing issue between using a fixed width and a border.. which is a no no.

in css you can do this (latest gen browsers): -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;

anyways hit me up on irc, i probably can come up with a jsfiddle for you to test with. also some ss. i'd do it now.. but i'm at work currently

[Mottie]

Hmm, maybe I'm doing it wrong, but if I add the border-box css you shared above to the sticky header css, the header cell widths are completely off, too narrow. And it doesn't matter if the widget sets the width of the cell or not.

Also, it appears that all versions of IE has the sticky header about 10px down from the top... are you seeing this as well? I don't seem to remember IE doing that before. Ugh.

[thezoggy]

here is a test case for you to check out.. http://jsfiddle.net/VW4HX/

[Mottie]

I'm still not really seeing a difference. I un-commented out the sticky header box border styling and it didn't appear to change.

By the way, on an unrelated note, have you seen the demo on dynamic checkbox sorting?

[thezoggy]

yes i saw that one, its neat but to me its disruptive.. checking off something then it sorts.. thus you somewhat lose your spot

[thezoggy]

yeah, the comment for the boz sizing was just there for you to test with. to make it look proper you have to do margin-left: 2px !important; width: auto !important; with it.

[Mottie]

In the last update I change the left margin and I think it fixed the problem in Firefox, but there is always a 1-2 pixel bit hanging off the right side. To be honest, I'm not seeing any misalignment. I think you shared a screenshot once which looked mis-aligned but I haven't been able to replicate it.

Also, I'm hesitating to use the box sizing css because it may solve the problem in modern browsers, but it doesn't do anything for older ones (IE), as far as I can tell. The only issue I'm seeing in IE is the top is not flush... If I add a top: -10px to the header for IE (even IE9), it looks okay. I guess I just need to add some IE specific css or find a more generic solution.

[thezoggy]

well i must say i have a feeling that this will never be perfect due to the fact that some browsers do funky things when rounding half values for widths.. why half the lines match up.. but then the other half doesnt.. and if you adjust by -1px you still see the same issue... but currently even without the box sizing its close enough.. but i'd still like to find a proper solution one day for this.. even if its only for the 'modern' browsers.

[Mottie]

Ok, I finally got the right edge lined up and it's working properly in IE. It's still one pixel off, intermittently, so I think we'll just have to live with it now. I'm still not using the box-sizing because I really couldn't tell a difference. Did you get them to line up perfectly?

[thezoggy]

honestly i gave up with the box sizing as well and just used what you had.. as it really wasnt too bad.. its only really noticeable when the table header has checkboxes as not all browsers treat that as a block element and it really messes with the box model. I noticed it last night in Safari on OSX? but honestly this may just been an issue of not using a css reset (normalize) to 'fix' the related browsers rather than anything tablesorter is doing wrong. the css in one of my projects is so crappy that its hard to really say for certain just yet.

So, load up http://jsfiddle.net/VW4HX/ you can see while yes the left and right edges do align.. the center dividers just end up slightly off all over the place..

Now load http://jsfiddle.net/VW4HX/1/ just woke up -- making corrections things are still not aligned with the normalize.css css reset. thus it would not appear to be some css rules thats needed.. I'll have to come back to this later once i've had something to wake my butt up :)

[thezoggy]

well with your latest updates.. yes the tr width is matching up.. but the columns inside it are even more off now. i think the main deal is that you try to hide this by using border collapse/no spacing.. thus the margin of error is less noticeable. when you are computing your widths.. they are slightly off.. but add the total widths together and its close enough to the actual width.. just seems like each column is +/- 1% width :(

[thezoggy]

the widget code on 2.1.5 did a much better job than 2.1.6 revision at calculating the td widths for the stickyheaders I've upgraded to 2.1.6 but left the widget code as the previous version for now :(

[thezoggy]

if the header is just text.. its pretty decent. but as soon as you add an image or form element (checkbox) it really breaks it in 2.1.6 widget code.

[thezoggy]

i must say, because of recent bugs found.. the widget code from 2.1.3.1. seems to be the best for stickyHeaders as well. I'm now reverted to using widget 2.1.3.1 and tablesorter 2.1.6. so far this has been the best combo with everything working nicely in ff/chrome.

[Mottie]

Alright, in version 2.1.7 I changed it to set the size of the div that wraps the content inside each table header cell... it seems to work much better. It still seems a bit off in the demo you shared, but I think it might be due to the differences in css. The newest css stylesheets have border-spacing set to zero and use a border of 1px; previously the border spacing was 2px with no border.

[thezoggy]

updated jsfiddle to reflect changes. noticed that there is something funky going on with the css... it should be using: https://raw.github.com/Mottie/tablesorter/master/css/blue/style.css

I override the images (to use base-encode versions so they would appear), but notice no bg color being set.. I tried this out locally and while the images work.. no bg color is being set for the active column in the header http://jsfiddle.net/VW4HX/2/

[Mottie]

jsfiddle is not loading the css file for some reason... if you copy and paste the css into the css pane, it works - demo

Also, I think the base-encode css isn't being applied because of css specificity. I should probably reduce the specificity of the default css to make it easier to add custom styling.

[thezoggy]

okay, not sure why the style.css isnt working anymore... put in some css so it would fill the bg color.. noticed that when you change it from span to div.. now i cant center it within the header now :(

http://jsfiddle.net/VW4HX/4/

tried doing margin: 0 auto;, tried text-align: center. nothing will center it now :/ span worked much nicer

[thezoggy]

add this to the jsfiddle css to see clearly what i'm talking about:

.tablesorter-header-inner { width: 100%; text-align: center; margin: 0 auto; background-color: #ff0000; }

[Mottie]

Alrighty, I've changed the css specificity so hopefully everything is working as it should.

[thezoggy]

yes, i do believe that fixed the bg color problem. now its just the ability to center the content in the header. is the problem...

[thezoggy]

ok, updated example with the latest blue style.css you just pushed. reduced my css as much as possible so you can see the issue.

http://jsfiddle.net/VW4HX/5/

try and make the header content center. it just wont happen now with the div's being used :(

[Mottie]

Hmm, I think it's because the padding is being applied to all th... so I moved it into the next line where .header and .tablesorter-header are defined (only applied to header cells that don't have sorter: false

I also added text-align: center to the th definition: (demo)

table.tablesorter th {
    background-color: #e6eeee;
    border-collapse: collapse;
    font-size: 12px;
    text-align: center; /* added this */
}
table.tablesorter .header,
table.tablesorter .tablesorter-header {
    background-image: url(black-bg.gif);
    background-repeat: no-repeat;
    background-position: center right;
    padding: 4px 20px 4px 4px; /* moved this from the above definition */
    cursor: pointer;
}

or I guess this would work too (just not in IE8 and older):

table.tablesorter th:not(.tablesorter-header) {
    padding: 0;
    text-align: center;
}

[Mottie]

I just updated the repository, but kept the same version number.

[thezoggy]

ok, things work much nicer now. updated sample to include latest css. now look at stickyheader there.. looks like the width is 1px off for each td, but the whole tr is perfect. so its pretty darn close.. but im ready to retire this issue if you are. its close enough for me

[Mottie]

Sure I think it's the best we can do with sizing... I've actually noticed that if you zoom in (ctrl-mousewheel) on the content, it does appear to be a pixel off; but when the zoom level is reset, it appears to be lined up perfectly, or maybe it's just so small that I don't notice it.

[thezoggy]

btw you may want to put 4px padding back to that line you removed. so the header elements 'look' the same except ones that sort have extra padding on the right.

[Mottie]

done

[thezoggy]

sweet, looks good :)