Thickbox 3.1 IE7 Positioning Bug

March 17th, 2008

thickbox

As previously mentioned in this post Thickbox 3.1 is currently broken in many revisions of Internet Explorer 7. Specifically, those revisions who return the substring “MSIE 6.0″ in the user-agent string.

Update: July 2008

This patch fixes a problem caused when certain installations of IE7 are incorrectly identified as IE6 causing the thickbox window to be positioned partially hidden in the top left hand corner of the viewport . It has become apparent that there are other bugs triggered in other revisions of IE7 which cause another type of miss-positioning with the thickbox window being centered correctly but outside of the viewport. This patch doesn’t fix that

As this is such a widespread problem, and lots of people seem to be having a little difficulty patching their copies of thickbox.js I thought i’d provide a patched copy here. But first a bit of background for those who are interested in why it’s broken. The following if statement in the function tb_position is as follows:

thickbox.js line 284

if ( !(jQuery.browser.msie && jQuery.browser.version < 7)) { // take away IE6
$("#TB_window").css({marginTop: '-' + parseInt((TB_HEIGHT / 2),10) + 'px'});
}

The bug is triggered when, in certain revisions of IE7 jQuery.browser.version == 6, resulting in the Thickbox window not receiving the correct CSS positioning. (In IE6, the window receives it position through some clever CSS expressions in thickbox.css)

The workaround for all this though is fairly straightforward. You simply need a more accurate way for weeding out IE6… and here it is.

$.browser.msie6

$.browser.msie6 =
$.browser.msie
&& /MSIE 6\.0/i.test(window.navigator.userAgent)
&& !/MSIE 7\.0/i.test(window.navigator.userAgent);

Once we have this new property defined within the $.browser object we can use it to fix the conditional statement mentioned previously. You can define $.browser.msie6 in thickbox.js (like i have in the patched copies of thickbox below), or patch jQuery itself. Or whatever. It’s up to you. After that all that needs to be done is to modify the following line to make use of our new IE6 sniffer:

thickbox.js line 284

if ( !(jQuery.browser.msie6)) { // take away IE6
$("#TB_window").css({marginTop: '-' + parseInt((TB_HEIGHT / 2),10) + 'px'});
}

If you don’t feel confident patching your own copy of thickbox then feel free to grab a patched copy below. This is thickbox 3.1 with the abovementioned code modifications applied and should simply replace your existing file.

Let me know if you find this useful

Posted in Web | Tagged with: , ,

33 Responses

  1. Happy GIlmour

    Thanks!!!

  2. Geek Princess

    Worked like a charm, thank you so much!

  3. Sternchen

    Very cool! Thanx a lot!

  4. vince

    Thanks ! very useful article !

  5. Frustrated

    I’m getting an Error:

    Error: $ has no properties
    Source File: wp-content/plugins/nextgen-gallery/thickbox/thickbox-pack.js?ver=3.1.1
    Line: 16

    Any Ideas? Been working on it for hours :(

  6. Jamie

    It would seem that you haven’t correctly included jquery. Without seeing any code I couldn’t really be any more specific i’m afraid.

  7. piranus

    so sweet, thank a lot

  8. Todd

    Still no luck for me.. what am I doing wrong?

  9. Wim Huygen (Belgium)

    Thanks a lot Jamie!
    You helped me a lot !!! ;-)

  10. Luigi

    Very very tnx!!

  11. Ludek

    Thank you! You saved my life:) If you had PayPal I would donate you something:)

  12. Marlowe

    Thanks! I´ve been working around with this problem for a day at least. I´ve started trying with the expression at the CSS and nothing. Once I removed the line you´re patched, it started to work at IE but no at Firefox, so I suspect the problem could be the sniffing… and I found your article and voila!

  13. Jamie

    yay! plz fwd me ur bank accountz.

  14. Mr X

    Thanks!!! You really solved my IE7 problem.

    Go on doing things like that! Thanks

  15. Leslie

    Hi,

    I’ve tried to use this patch, but it did not solve my problem unfortunately… :(

    Following this link you will see a product listing: http://szurka.hu/index.php?cPath=22_110_42

    clicking on a thumbnail pops up a bigger picture, but when I use IE7 and scroll down, and click to the thumbnail, the picture pops up upside, where can not be seen…

    Can you help me please ?

    (sorry for my bad english)

  16. Jamie

    I’ve had a quick look at your site. That’s a different problem from the one described here. Make sure you have an up to date copy of thickbox.js and thickbox.css and try disabling your site’s stylesheet temporarily.

    It looks to me that the thickbox window is somehow not picking up position:fixed.

    (your english is fine, and 100% better than my hungarian!)

  17. Seree

    Thanks you,

    This post save me a time to solve this problem.

    However, I got it harder as now my IE7 error when entering my page.

    Woo Hoo, How Fun Programming!

  18. Zoran Tanevski

    Thank you, thank you and thank you!

    Cheers!

  19. Pavel_Pronskiy

    Thanks for with fix!

  20. Paolo

    Ti scrivo dall’Italia, funziona alla grande!!!!!grazie mille è stato un aiuto prezioso!!

  21. proto

    Thank you!
    It Works!!

  22. Sergi

    Thanks very much!!

  23. Juan F. Sarria

    Thank you very much :-)

  24. Michael Evangelista

    The problem I am having with thickbox was, sadly, not fixed by the patched file.

    In IE7, the thickbox window appears at the very bottom of the browser window, with the bottom part of the window out of sight, not just too low but cutting off content, essentially broken.

    Several others have had the same issue and so far I haven’t seen a fix… any ideas? To make it more difficult, this does not appear to happen with all versions of IE7.

    Here’s my google group post with more info…
    http://tinyurl.com/5sxa8v
    Getting desperate, otherwise entirely loving thickbox.
    Thanks in advance for any light shed on this!

  25. Michael Evangelista

    Ok this is nuts. I have two computers , but running IE7 on windows vista. IE on both machines shows the version as 7.0.6001.18000

    I put code in the patched file to return the jquery browser version as an alert.

    on one pc, IE is seen as 6, on the other one, as 7. (even with the patch, unless I am somehow using it wrong).

    this brings up 2 questions

    - what is the reason for one copy of IE7 to report as 6 but not the other, if the ie version number is exactly the same? (what determines this, if not that number?)

    - is there another version of the identifier script i might try?

    thanks!

  26. Michael Evangelista

    got it!

    Based on code from this jquery forum thread
    http://tinyurl.com/6fs5sw,
    I replaced Jamie’s patch code with this

    if ( document.all && !window.opera && !window.XMLHttpRequest && $.browser.msie )
    {var isIE6 = true;}
    else
    { var isIE6 = false;} ;
    $.browser.msie6 = isIE6;

    and from what i can tell it works like a charm! thickbox is centered where it should be on the page in both of my IEs, and both return msie6 as false.

    Thanks for pointing me on the right direction - still VERY curious about why some installations return a different browser version, and why your fix, which has obviously worked for so many, did not work for me.

  27. Chris Tennyson

    Make sure that the first line of your html is <!DOCTYPE html PUBLIC…..

    I had a style sheet ref before the doc declaration that was put there by the script I was using.

    I corrected where it was adding the style sheet, deleted it and wah-la IE stopped acting stupid.

  28. Simon Thompson

    Kudous for putting the code into an easily usable patch, but alas it didn’t fix my problem.

    Whenever I click an event on my event calendar it appears at the top of the page.

    Any ideas?

  29. Jamie

    @Chris I think it’s fair to say it goes without saying that bad things happen if you don’t declare a doctype

    @Simon That’s not the bug that this patch was intended to fix. I have seen something similar to what you mention but as yet I haven’t had the time or inclination to track down it’s cause.

    I would suggest you first:

    a.) Download fresh copies of thickbox.js, and thickbox.css from http://jquery.com/demo/thickbox/

    b.) disable your sites own stylesheet(s) to determine if there are any odd conflicts

    c.) beat your face repeatedly into your keyboard until pieces of broken plastic embed themselves into your face. It won’t solve the initial problem but it WILL give you something else to focus on

  30. Simon Thompson

    Jamie, alas I have already done Steps a) and c) and don’t know how to do step B as I’m using wordpress.

    Still it was nice to get a reply for once :)

  31. Jamie

    Step B? If you’re using Wordpress it should be as simple as temporarily renaming the file style.css in your theme directory.

  32. Simon Thompson

    Thanks for the quick reply Jamie.

    I did rename the css file, but predictably the website got b0rked and I wasn’t able to try the sidebar.

  33. Jamie Thompson

    Today i uncovered a bug in Internet Explorer 7 which can cause IE7 to fully identify itself as IE6 on systems with a large number of toolbars and spyware installed. More here

    Please note, the aforementioned patch will not work in cases caused by this new bug

Leave a Comment

Please note: Comment moderation is enabled and may delay your comment. There is no need to resubmit your comment.