This bug may appears (please see attachment) if use IE 7.0 (can't check with IE 6.0) when open pages with "floating" table header (like admin/build/themes),
my solution to fix it is adding attribute 

position:relative;  
background:#FFFFFF;

for "thead th" in style.css for current theme or in \modules\system\style.css if you would like to...
but Im not sure that this is the best solution. please advice. thnx.

CommentFileSizeAuthor
#16 tableheader-ffmac-ie7-fix-b.patch1 KBdvessel
#8 Picture 4.png29.8 KBrayarub
#6 tableheader_ie7_floating.patch316 bytesrayarub
#5 tableheader-ffmac-ie7-fix.patch970 bytesdvessel
#1 ff2-scroll-fixed-intersect.png38.68 KBdvessel
screen.png42.02 KBNecroHill

Comments

dvessel’s picture

dvessel commented
Title: thead th bug (with "floating" table header ) in style.css » browser specific rendering bugs with "floating" table headers.
Priority: Normal » Minor
Status: Needs review » Active
StatusFileSize
new ff2-scroll-fixed-intersect.png38.68 KB

I noticed this a while back. It's specific to IE7 & Garland. Another quirk is in FF for the mac when the hidden headers intersect with scroll bars. This always happens with position: fixed outside of this situation.

This can be remedied by pushing the headers outside the viewport when it's hidden with a top: -9999px.

NecroHill’s picture

NecroHill commented

I have made a mistake it should be \modules\system\system.css instead of \modules\system\style.css
sorry about that

jrabeemer’s picture

jrabeemer commented

Necrohill, please make a patch that we can test. This is a *serious* CSS bug that needs to get fixed ASAP.

NecroHill’s picture

NecroHill commented

I do not know how to make this patch, to be honest.
my solution is:
in modules\system\system.css find

thead th {
  text-align: left; /* LTR */
  padding-right: 1em; /* LTR */
  border-bottom: 3px solid #ccc;
}

and replace for:

thead th {
  text-align: left; /* LTR */
  padding-right: 1em; /* LTR */
  border-bottom: 3px solid #ccc;
  position:relative;
  background:#FFFFFF;
}

It will be appreciated if someone make a patch :)

dvessel’s picture

dvessel commented
Status: Active » Needs review
StatusFileSize
new tableheader-ffmac-ie7-fix.patch970 bytes

Necro, It's specific to Garland, not system wide. The IE7 issue is also specific to the module administration page where there are multiple tables thus multiple floating headers.

Here's a patch, it works around the FF Mac issues also by using the "display" property instead of "visible" right from tableheader.js.

rayarub’s picture

rayarub commented
StatusFileSize
new tableheader_ie7_floating.patch316 bytes

Confirmed that the CSS changes in #4 seem to fix the IE problem. I rolled a patch and it seems to work. However this is the first time I've made a patch so there might be problems.

(Aside: The patch in #5 seems to cause the header to stop floating in FF 2 and Safari 3 on Mac OS X 10.5. In IE7 on Vista, the line no longer appears at the top, but the header also does not float properly (screenshot attached.))

dvessel’s picture

dvessel commented

rayarub, check again by refreshing your browsers cache. Patch #5 still applies, I already tested with the browsers listed. Adding more style rules is more likely to grow the cruft down the line. –heh, that made no sense but you know what I mean.

rayarub’s picture

rayarub commented
StatusFileSize
new Picture 4.png29.8 KB

I refreshed the cache and dumped the drupal cache, but no luck; the headers do not float in my Safari or FF after applying that patch.

Here's a screenshot of the issue I'm seeing now in IE (you can see the line running through "administer content types").

dvessel’s picture

dvessel commented
Version: 6.0-rc2 » 6.x-dev

Strange.. You working from latest Head in CVS? It works perfectly fine on my end.

jrabeemer’s picture

jrabeemer commented

Ok somebody decide which patch to go with and test ie. which is smallest, fastest, and works in all browser?

rayarub’s picture

rayarub commented

No, I was working on the RC2 release. I tested it on the latest HEAD and it works fine... sorry about that.

jrabeemer’s picture

jrabeemer commented
Priority: Minor » Critical

I tested both patches #5 & #6. They both work, however, 1. this is a Garland issue, 2. rayarub's patch, it causes the floating header to float *under* the table header and overlaps text. It also seems to reduce the vertical height of the tableheader blue line by 1px. It all just looks weird. dvessel's patch causes Opera 9.5beta (w/1.2.3 jquery) to misfire the tableheader event, and it sometimes fails to scroll the tableheader. This maybe a future bug with jquery 1.2.3 along with this patch.

+1 dvessel's patch

Marking critical because this is a front-facing in-your-face IE7 bug that is easy to fix.

jrabeemer’s picture

jrabeemer commented
Status: Needs work » Needs review

dvessel, there's a corner case bug with your patch in IE7.

1. Apply your patch
2. Go to admin/build/modules
3. Expand Core-required
4. Shrink your browser window height to 150px or less.
5. Watch the viewport move up and down in an infinite loop as the tableheader appears and disappears.

catch’s picture

catch
he/him
Primary language English
commented
Status: Needs review » Needs work
chx’s picture

chx commented

150px or less? Opera 9.5 beta and future jQuery? Hardly we care about those.

dvessel’s picture

dvessel commented
Priority: Critical » Normal
StatusFileSize
new tableheader-ffmac-ie7-fix-b.patch1 KB

That's quite a corner case. If your testing with jQuery 1.2.3 then it could be this issue affecting 9.25 as well. It does this odd swapping [jquery site] of the display property when .offset() is used. Could be interfering with the display property being set.

The patch doesn't apply any longer so here it is again.

Don't think this qualifies as critical. Nothing breaks, it's simply a rendering glitch.

jrabeemer’s picture

jrabeemer commented

I reverted to 1.2.1 jQuery, I still get the looping IE7. I will say that doesn't kill the patch since I don't know why anyone would shrink their window to less than 150px.

dvessel’s picture

dvessel commented

momendo, I tried to recreate the looping and couldn't so, I think you'd have to be very lucky to run into this. :)

edit: never mind that. I did reproduce but it wasn't in an endless loop. Just a little flickering and it stops.

jrabeemer’s picture

jrabeemer commented
Status: Needs review » Needs work

I tested successfully in IE7, Safari 3.0.4, Opera 9.5beta, FF2.

dvessel: I can get it to flicker infinitely. You have to get it in position just right. This is hard to reproduce, I agree. The only fix I can think of is to scan the viewport window, if it's below a certain height, say 150px for example, then turn off the tableheader event.

dave reid’s picture

dave reid
he/him
Primary language English
Location Nebraska USA
commented
Component: theme system » javascript
Assigned: NecroHill » Unassigned

Marked #335931: IE7 sticky table header does not work as a duplicate of this issue. Moving to JavaScript component.

multiplextor’s picture

multiplextor commented
Status: Needs work » Closed (won't fix)

Closed. The reason: expired.