Thickbox 3.1 IE7 Positioning Bug
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: JavaScript, jQuery, Thickbox
March 19th, 2008 at 4:18 pm
Thanks!!!
March 25th, 2008 at 5:23 pm
Worked like a charm, thank you so much!
March 26th, 2008 at 12:40 pm
Very cool! Thanx a lot!
March 28th, 2008 at 9:12 am
Thanks ! very useful article !
March 30th, 2008 at 8:08 pm
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
March 31st, 2008 at 8:23 am
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.
April 16th, 2008 at 1:23 pm
so sweet, thank a lot
April 17th, 2008 at 9:13 pm
Still no luck for me.. what am I doing wrong?
April 20th, 2008 at 10:33 am
Thanks a lot Jamie!
You helped me a lot !!!
April 29th, 2008 at 9:45 pm
Very very tnx!!
May 6th, 2008 at 12:58 pm
Thank you! You saved my life:) If you had PayPal I would donate you something:)
May 7th, 2008 at 6:57 pm
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!
May 12th, 2008 at 11:04 am
yay! plz fwd me ur bank accountz.
May 15th, 2008 at 3:59 pm
Thanks!!! You really solved my IE7 problem.
Go on doing things like that! Thanks
May 19th, 2008 at 2:21 pm
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)
May 19th, 2008 at 2:47 pm
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!)
May 20th, 2008 at 2:49 am
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!
May 27th, 2008 at 11:34 pm
Thank you, thank you and thank you!
Cheers!
June 8th, 2008 at 4:38 pm
Thanks for with fix!
June 16th, 2008 at 8:04 am
Ti scrivo dall’Italia, funziona alla grande!!!!!grazie mille è stato un aiuto prezioso!!
June 19th, 2008 at 11:40 am
Thank you!
It Works!!
June 24th, 2008 at 4:40 pm
Thanks very much!!
July 12th, 2008 at 3:46 am
Thank you very much
July 19th, 2008 at 4:52 am
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!
July 19th, 2008 at 7:52 am
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!
July 19th, 2008 at 4:23 pm
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.
July 21st, 2008 at 3:47 am
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.
July 21st, 2008 at 9:06 am
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?
July 21st, 2008 at 11:44 am
@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
July 21st, 2008 at 12:23 pm
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
July 21st, 2008 at 3:06 pm
Step B? If you’re using Wordpress it should be as simple as temporarily renaming the file style.css in your theme directory.
July 22nd, 2008 at 8:36 am
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.
July 23rd, 2008 at 2:25 pm
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
July 27th, 2008 at 5:59 pm
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.
August 5th, 2008 at 8:22 am
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!!
August 7th, 2008 at 11:32 am
Waoo !! muchas gracias ! ya estaba preocupado por internet explorer…
Tkanks, a lot…..
August 14th, 2008 at 11:21 pm
Thanx dude. Worked gr8 .. you saved my day. god bless you !!!
August 22nd, 2008 at 4:24 pm
[...] 经过查找，最后在国外的网站看到了一位朋友修正了这个问题。具体的修正过程看这里吧 [...]
August 26th, 2008 at 1:11 pm
AWESOME!…redesigning our site, and it was driving me up the wall. Thanks…now fixed
September 4th, 2008 at 8:23 pm
Finally a nice tutorial.. And of course for the lazy people (that’s me) a download file:) Thanks a lot
September 18th, 2008 at 11:44 pm
Thanks a lot! It help’s me a lot! Saves my life….
September 25th, 2008 at 11:01 pm
Thanks!!
This was verry helpfull!
September 27th, 2008 at 2:05 pm
Thanks dude!
You’re doing good karma.
om shanti
October 1st, 2008 at 6:28 pm
Thanks so much.
October 7th, 2008 at 11:54 am
One patch to rule them all !! Thanks dude
October 13th, 2008 at 4:55 pm
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.
October 13th, 2008 at 5:46 pm
You should send this patch to the developer of thickbox: http://codylindley.com/contact/
October 13th, 2008 at 6:27 pm
Thanks for the solution. You saved my hours.
October 13th, 2008 at 11:42 pm
@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
October 17th, 2008 at 4:03 am
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.
October 20th, 2008 at 11:39 pm
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!
October 24th, 2008 at 12:17 am
Tanks for Help……..
November 9th, 2008 at 12:26 pm
Thanks very much, it works like a charm!
November 18th, 2008 at 3:12 pm
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
November 20th, 2008 at 6:55 pm
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.
November 24th, 2008 at 8:46 pm
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).
November 24th, 2008 at 10:11 pm
Thanks for the patch, works perfect!!
November 25th, 2008 at 3:20 am
[...] 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 [...]
November 28th, 2008 at 10:56 am
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.
December 1st, 2008 at 6:49 pm
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?
December 9th, 2008 at 3:29 pm
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!
December 18th, 2008 at 7:31 pm
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!
December 31st, 2008 at 4:56 am
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
January 4th, 2009 at 10:58 am
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
January 4th, 2009 at 7:07 pm
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?
January 6th, 2009 at 9:29 pm
@ 46 MP - That worked for me as well. I checked in IE6 and Firefox and switching out the && didn’t affect those browsers. Thanks.
January 14th, 2009 at 11:51 am
Great work ! Thanks a lot for this patch.
January 29th, 2009 at 11:51 am
Thanks, it helped me out
January 31st, 2009 at 1:21 am
Thanks just what i was looking for
February 10th, 2009 at 3:29 pm
Thanks!!
February 10th, 2009 at 9:14 pm
Perfect! Thanks.
February 13th, 2009 at 9:43 pm
Thank you! Works!
March 5th, 2009 at 8:36 pm
Great fix. Why is this not on the jQuery demo page? It should be!
March 6th, 2009 at 4:49 pm
Thanks!
March 12th, 2009 at 8:13 pm
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;
March 12th, 2009 at 9:52 pm
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);
March 17th, 2009 at 2:48 pm
its not works for me.
i dont understand.
March 30th, 2009 at 4:13 pm
[...] its ie bug can be fixed by http://jamazon.co.uk/web/2008/03/17/thickbox-31-ie7-positioning-bug/ [...]
March 30th, 2009 at 9:06 pm
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!
April 19th, 2009 at 1:25 pm
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.
April 20th, 2009 at 4:03 pm
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
May 7th, 2009 at 11:39 pm
Hello
Tb 3.1 now there are problems with IE 8 .. Some solutions?
thanks
May 9th, 2009 at 5:17 pm
Greatly appreciated, soooo thank you
Thanks !!
May 12th, 2009 at 6:35 pm
LEGEND!!!!!!!
Ur A Superhero of a man!!
May 21st, 2009 at 8:50 pm
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.
May 24th, 2009 at 8:30 pm
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);
June 6th, 2009 at 4:59 pm
Good Job, Thank You
June 15th, 2009 at 7:26 pm
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
June 25th, 2009 at 6:17 am
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.
June 25th, 2009 at 6:19 am
It works the same for me for IE8. Thank you.
June 27th, 2009 at 11:58 pm
Great job! It works perfect!!
Thanks a lot