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: , ,

91 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

  34. O.C. Oniah

    I’ve tried this, it worked at centering ThickBox on the page instead of above however now it’s placed on the right, not in the center. Any ideas why?

    http://www.kambani.com/abtus.asp?p=ms
    Click on Chima Ezeilo.

  35. Nikhil

    hey thanks guys.. this is very helpful.

    Earlier, I was not able to fix the positioning problem using the patch copy. But then I realized the doctype was also incorrect. I corrected the doc type as well… and now its working absolutely fine

    THANX A LOT!! :)

  36. Carlos

    Waoo !! muchas gracias ! ya estaba preocupado por internet explorer…

    Tkanks, a lot….. :)

  37. Sarfaraz

    Thanx dude. Worked gr8 .. you saved my day. god bless you !!!

  38. 关于jquery在windows XP下IE7窗口位置溢出窗口的bug - 记录与PHP的PK经历

    [...] 经过查找,最后在国外的网站看到了一位朋友修正了这个问题。具体的修正过程看这里吧 [...]

  39. Bryan Chalker

    AWESOME!…redesigning our site, and it was driving me up the wall. Thanks…now fixed :)

  40. Alex

    Finally a nice tutorial.. And of course for the lazy people (that’s me) a download file:) Thanks a lot

  41. Daniel Tomy

    Thanks a lot! It help’s me a lot! Saves my life….

  42. StiFFa

    Thanks!!
    This was verry helpfull!

  43. xomai

    Thanks dude!
    You’re doing good karma.

    om shanti

  44. Toonman

    Thanks so much.

  45. Beeboy

    One patch to rule them all !! Thanks dude ;-)

  46. MP

    For some reason the thickbox on my site ended up at the top of the page in IE7, and its position was not fixed as it would move while I was scrolling.
    I tried your suggestion but it did not work on my website. I checked the version using alert(jQuery.browser.version), and it returned correctly I was using IE7.
    After some trial and error coding (I am no js expert) I got it to work using this:

    I changed the code as follows:

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

    changed to:

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

    Hence I replaced && by ||. I have no idea why this works. I have not tested it on other browsers or other versions.

    Is it possible that there is a conflict between my website stylesheet and the thickbox stylesheet?
    On other sites using the exact same thickbox.css, jquery.js and thickbox.js the positioning works fine in IE7.

  47. Josh Kraemer

    You should send this patch to the developer of thickbox: http://codylindley.com/contact/

  48. Ali from Turkey

    Thanks for the solution. You saved my hours.

  49. Jamie Thompson

    @Josh I did try, but never had a response. To be honest i’m not sure Cody is actively developing Thickbox anymore, and inany case the ‘bug’ lies more with jQuery itself rather than Thickbox.

    @Ali and everyone else, you’re welcome

  50. dave

    After two days I finally got the patch to work. Friends started thinking I was crazy saying that thickbox was half off the viewport at the bottom in IE7. They all said that it was displaying correctly for them on three different computers at work and at home. I used the .js patch and everything displayed right in IE7!!! as well as FF, Chrome, and Safari. Call me crazy…it works!!! thanks for the fix.

  51. Raoul Boers

    Awesome! On behalf of the University of applied sciences in Amsterdam, I thank you. Thought went nuts on this issue. Your solution was very helpful, until the next installment of IE that is! ;-)

  52. Vinicius

    Tanks for Help……..

  53. Dan Collins

    Thanks very much, it works like a charm!

  54. Kristy

    Scenario: When a user clicked on a thickbox link at the bottom of a long page, the thickbox pop-up would populate at the top, and the user would have to scroll back up to see it.

    MP had the solution…to change the two ampersands (&&) to two pipes (||) on line 284.

    Congrats MP!! As everyone suggested, you should submit this to the developer. Very important stuff :D

  55. Daniel

    For those who are having the vertical alignment issue, make sure that your thickbox.css is above your thickbox.js. I tend to get sloppy and didn’t realize that I was making that error.

  56. Yin

    In reply to MP (comment #46) I applied your fix but the caused the position to be off on FF3.

    Instead what I did was –

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

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

    This seemed to have fixed it for IE7’s issue with putting the box way at the top of the page and doesn’t seem to have effected any other browsers (tested IE6, FF3, FF2, Safari and IE7).

  57. Nathan

    Thanks for the patch, works perfect!!

  58. Nextgen Gallery Image Display Errors in Internet Explorer | On The Net

    [...] only css hacks. Apparently Microsoft changed something which broke jQuery. You can read about that jamazon.co.uk, which I found when googling for a solution to the [...]

  59. Torsten Liebig

    Found another bug: When opening thickbox inline content from a page that already has a querystring attached, the first parameter of your thickbox query string does not get parsed correctly:

    Example/Reproduce:
    Open a thickbox inline content from within a page with an url like the following:
    yourfile.php?yourquery=someval

    This will make the complete link like so:
    yourfile.php?yourquery=someval#TB_inline?height=300&width=200(…)

    The two question marks cause TB to trip and not recognize the first parameter “height=300″ correctly, causing the TB popup not to respect your defined height.

    Solution/Workaround:
    Workaround is to insert a dummy parameter right after the #TB_inline before your first valid parameter like so:
    #TB_inline?query_string_in_url=true&height=300&width=200(…)

    This will cause every parameter passed on via the query string AFTER the dummy parameter “query_string_in_url=true&” to be working within ThickBox. Beware: due to the bug, the parameter “query_string_in_url” will not be available within ThickBox, returning undefined. Any parameter after that will work just fine, though.

    Solution would be to fix the query string parsing function for this use case, which hopefully will be included in later revisions.

  60. Ryan

    Many thanks for providing this patch!!

    However, somewhere in the JS I think it might be missing a semi-colon. When try to run your packed version in IE6, or compress myself with JSMin, I get errors and the Thickbox positioning is off.

    When I run the un-compressed version, everything works fine.

    I’ve scoured the thing trying to find the problem with no success.

    Can anyone else track it down? Anyone else having problems with Jamie’s packed version in IE6?

  61. jovnas

    upgrading from an erroneous IE7 to IE8 (beta) displays the same error in the user agent string:
    Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB5; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; .NET CLR 1.1.4322; .NET CLR 2.0.50727)

    i just added a check for /MSIE 8\.0/i in the $.browser.msie6 fix and it worked!

  62. Jon

    this should be part of Thickbox but it isn’t as of this date.

    This solution, as amended by others here, solved my problem with IE pushing the TB window to the top of the page.

    thanks to all!

  63. Dave Jackson

    Am using NEXTGen Gallery plugin for WordPress, which when I apply all these hacks does not change IE at all. In fact, I don’t think NEXTGen calls thickbox.

    Anyone have similar issues and care to share a fix?

    Kind regards,
    Dave Jackson
    Three Best Beaches

  64. Michael

    Can you help me? I tried you patched but it didn’t work. http://www.w3click.com/mod/product/act/cat/cid/1 . Thanks a lot

  65. Michael

    after debugging, i found that in IE, the div $TB_window appears underneath the overlay div. So it cannot be seen. Can you help me with this?

  66. Gears of War Xmas

    @ 46 MP - That worked for me as well. I checked in IE6 and Firefox and switching out the && didn’t affect those browsers. Thanks.

  67. Michel P.

    Great work ! Thanks a lot for this patch.

  68. Eyes Drinker

    Thanks, it helped me out

  69. benemp

    Thanks just what i was looking for

  70. Nick

    Thanks!!

  71. M R

    Perfect! Thanks.

  72. Rob

    Thank you! Works!

  73. Mark Goddard

    Great fix. Why is this not on the jQuery demo page? It should be!

  74. huvanile

    Thanks!

  75. shahram

    hi,
    thanks for the find,
    though do u have any specific reasons why not to do this instead of all you are doing, either at the end of jquery or at the beginning of thickbox :

    if(/MSIE 7\.0/i.test(window.navigator.userAgent))jQuery.browser.version=7;

  76. shahram

    even better,
    this code should set the version correctly regardless of IE version
    (MSIE 8.0,8.0b,7.0,7.0b,6.0,6.0b,5.5,5.01,5.0,5.0b1,4.01, etc.):
    if(/MSIE (\d+\.\w*);/i.test(window.navigator.userAgent))jQuery.browser.version=parseFloat(RegExp.$1);

  77. RIDVAN

    its not works for me.
    i dont understand.

  78. superjavason » lightboxs overview

    [...] its ie bug can be fixed by http://jamazon.co.uk/web/2008/03/17/thickbox-31-ie7-positioning-bug/ [...]

  79. fernando

    I do the fix of the 56 comment, and works fine!!..
    ———————–
    put this..

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

    and put this
    ………………….

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

    thanks to everybody that fixing this problem!

  80. quik

    I have used your patch but I can’t get the pics centered.
    If I scroll down and click on the pic it shows up above istead of centered I can scroll the pic up and down but only in ie, not in ff. please can you help.

  81. astralarts.co.uk

    the solution is because on some windows / ie version
    IE7 is detected as IE6 !! You will make it work when you remove DTD from your page.
    adding xhtml DTD switch this specific version of IE7 to QUIRK MODE. meaning it act as IE6, way around.
    To solve this problem:

    modify tb_position() and add
    $(”#TB_window”).css({marginTop: ‘-’ + parseInt((TB_HEIGHT / 2),10) + ‘px’});

    at the beginning or remove IF statement and leave inside of it.

    cheers
    aa

  82. Enrique

    Hello

    Tb 3.1 now there are problems with IE 8 .. Some solutions?

    thanks

  83. Marie ALHOMME

    Greatly appreciated, soooo thank you :)
    Thanks !!

  84. Aidan

    LEGEND!!!!!!!

    Ur A Superhero of a man!!

  85. Jirendra

    Hi, good article. it helps me to work in ie7. but i have another problem.

    I have modified thickbox.js such a way that it will create unique id for each and every elements opening during on click of link.

    so, now on close button i m just hiding that all unique elements instead of removing from the body. which right now thickbox.js is doing in tb_remove() function.

    show and hide elements will help me on click of second time on same link means it will not reload the page again and again.

    Its working fine in mozilla. but ie7 making problem. do you have any idea of this kind of logic which i m right now using in my project ??

    i donot want to remove elements from the body during close button click on thickbox window.

  86. Ben Palmer

    Just a quick note that i added to line 16 to make it work in ie8 too.

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

  87. widi

    Good Job, Thank You

  88. Dimitris

    still I’m unable to make it work with IE8 (stupid upgrade). I’ve made all the above corrections but still image appears way up to the top of the scrolling page. Any suggestions gentlemen?

    Dimitris
    Athens, Hellas

  89. justintime

    I experienced the same problem in IE8. The thickbox is at the bottom of the scrreen.
    It works in IE8 using the same fix as mentioned by Jamie.

  90. skunk1

    It works the same for me for IE8. Thank you.

  91. Julian

    Great job! It works perfect!!
    Thanks a lot :)

Leave a Comment

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