By chucks0 on

I am having some issue with the sticky header feature in Drupal 6. The header row doesn't maintain the formatting and although the width works in Firefox, in Internet Explorer 7 & 8, the sticky header doesn't maintain the width.

Example:

http://www.bowlmidlands.org/content/history/gcba/allstars

⋅ Categories: Drupal 6.x

Comments

vako’s picture

vako commented

I don't see any problem with the width in the link that you provided. I used FireFox, Opera, IE 6 & IE 8.
If you are still seeing something like that, try the following:
- Use a different computer to isolate the issue
- Increase the resolution of your screen
- Temporarily use a different theme

chucks0’s picture

chucks0 commented

The problem occurs in IE when you scroll down in the page and the header becomes sticky. The header will then fill the entire width of the page rather than staying the width of the table itself. This occurs on every computer I test with.

vako’s picture

vako commented

It's working perfectly fine for me, I don't see the same issue at all. Let's see if anyone else will find the same issue with your link.

gooddesignusa’s picture

gooddesignusa commented

I actually just ran into this the other day. Not sure if its theme related. I'm using the basic theme. To fix it i just added the width to the ie style sheet. Class name of "sticky-enabled"
The basic theme adds class names to the body tag. For example the user permission page has all these classes set on the body tag.

"not-front logged-in page-admin one-sidebar sidebar-left admin page-admin-user-permissions section-admin browser-firefox3 tableHeader-processed admin-menu"

So if you wanted to fix the sticky width problem in ie for just this page you would add this to your IE style sheet:
.page-admin-user-permissions .sticky-enabled{
width:
} or for all admin pages
.page-admin .sticky-enabled{}

I really like the function that adds classes to the body. I'm somewhat new to drupal and that really helps me theme with css. I know the basic theme didn't come up with the idea but thats just the theme i'm use to using. I really think all themes should have it *shrug*

Hope that helps ya.

vincetingey’s picture

vincetingey commented

I have this same issue. Looks like jquery is making the table larger in ie than in firefox.

Any fix for this? Looks like chucks0 still hasn't found a solution as I looked at his link with my IE8 on windows xp and it was still there.

Help please?

vako’s picture

vako commented

OK, this is weird indeed. Some of you are able to see the issue but I am not.
In FireFox I can see the sticky header works ok. In IE 8 & IE 6 the header doesn't stick at all, but you seem to see it in IE 8 but going the whole width of the screen?
When we say the header, we mean the line that says: Season First Team Second Team, right?

jefftrnr’s picture

jefftrnr commented

There seem to be 2 (maybe more?) CSS settings which cause sticky-enabled headers to render incorrectly in IE browsers.

1) table width set to %
-- it seems you need a fixed width for the table, or IE may make the sticker header row too wide or narrow, throwing incorrect alignments for each column.

2) th padding-left and padding-right (is this a box-model issue?)
-- padding to the th cell (left or right) gets added to the width of the cell in the js code for IE, so the sticky headers are incorrectly spaced. Each of their widths become width + padding-left + padding-right... all other browsers don't do this. (Thanks a lot, Bill!)

In other words, set your table width and remove your th padding. Something along the lines of...

table.sticky-enabled { width: 290px; }
table.sticky-enabled th { padding-left: 0; padding-right: 0; }

This fixed the problem for us. Hopefully it's helpful to others.