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