1

I'm hoping this isn't a situation in which I need to resort to browser detection.

Basically I have a page with a large table, so I've created an additional header with a "position: fixed" property that appears (and stays visible) when you scroll down the page (using some really simple JS code).

However, in order to get the columns of that header to line up correctly with the columns of the larger table, I've been manually setting the "width" property of each column (for both tables), because my fixed header cells aren't exactly the same as my normal table header cells, due to lacking an extra background-image. (All of this is probably easier to understand if you just look at the page itself through the link above.)

The problem is that one set of widths works for Firefox, while another works for Safari/Chrome, and neither works for Opera. I'm guessing my CSS may not be optimal to handle this kind of situation but I don't know how to make it better. Could anyone take a look (maybe using Firebug, etc.) and let me know if there's a better way to handle this that would make everything line up in every browser?

UPDATE: By playing around with the issue in Firebug I've narrowed down the cause. First a little bit of background. Instead of creating a totally separate class of table for my "floating" header, I've given it a special ID ("floater") and allowed it to inherit most of the CSS from my normal table, except I've changed the background image to a transparent one of the same size (to preserve spacing) and set "display: none." My JS, which I'm pasting here:

$(window).scroll(function () {
     var header = document.getElementById("floater");
     if (($(window).scrollTop()) > ($(document).height() / 142)) {
        header.style.display = "block";       
     } else {
        header.style.display = "none";

 }
});

then causes "display" to change to "block" if you scroll past a certain point down the page.

What I've discovered is that if I load up the page and, before I try scrolling at all, use Firebug to disable the "display: none" style setting, the floating table's cells are perfectly spaced. However, as soon as I start scrolling down the page and the JS kicks in, the column widths change! But at that point, if I go into Firebug and disable "display:block" in the CSS panel, it fixes the alignment.

So header.style.display = "block"; is not doing what I want; instead of just reversing the "display:none" CSS (which is what I do want), it's somehow resetting the column widths. Ditto for header.style.display = "inline". Is there another JS statement I can use to simply disable "display:none"?

7
  • A friend of mine struggled with the same type of problems while writing his jQuery plugin (blog.slackers.se/2011/01/floating-header-plugin-v140.html). Perhaps it can help.
    – powerbuoy
    Aug 12, 2012 at 1:58
  • @powerbuoy, thanks very much for the link. I gave it a try but it doesn't seem to work for me. Am I supposed to do anything beside adding <script type="text/javascript">jQuery("#table").floatHeader();</script> to my page, and making sure my table has a "header" tag and id="table"?
    – GChorn
    Aug 12, 2012 at 3:36
  • You need to include the actual plugin code as well (<script src="plugin.js"></script><script>$('table').floatHeader()</script>) and of course you need to include jQuery first of all. Also, if you're running the code before the table HTML is printed you need to run the code on document ready.
    – powerbuoy
    Aug 12, 2012 at 16:26
  • @powerbuoy, thanks for your suggestion. I tried the plugin again and it worked; however, two problems. First, it doesn't solve my column alignment issue (that's right, the column widths actually CHANGE once the header starts floating!). And second, my tables use another plugin which makes them sortable by clicking on the header cells, and once the header starts floating, clicking on the cells no longer works. That's fine, but in that case I need the background images in the cells (which look like arrows) to disappear as well; hence my original approach of making a separate table.
    – GChorn
    Aug 13, 2012 at 8:41
  • Hmm ok so it suffers from the same problems as you had initially then? If so I guess you can just use your own code. Regarding the sorting plugin, I guess that's expected. Have you tried running the sorting plugin before the floating header plugin (or vice versa?) to see if that makes a difference (if the floating header-plugin is run last and it actually makes a clone of the original header the event handles and links etc should all come with - not sure that's how it works tho). Afraid I can't be of more help as I haven't written (or even worked with) the plugin.
    – powerbuoy
    Aug 13, 2012 at 8:46

1 Answer 1

0

Have you tried applying a good CSS reset style first?

For example http://meyerweb.com/eric/tools/css/reset/

The problem is every browser has a set of "default" styles. If you don't change all the styles you might have some of any given browser's default be used. With a reset all browsers start at the same place.

You have to use a reset if you want your CSS styles to be cross browser.

1
  • Thanks for the tip, and I think I will probably use this on principle (and to avoid other cross-browser issues), but I think this may not be exactly the problem here. I think it may be a JS-to-CSS issue; please see my updated post for more info.
    – GChorn
    Aug 13, 2012 at 9:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.