Jquery Thickbox appearing too low in Internet Explorer 7/8 (IE 7/8)
A frustrating problem today, one of those ones where you think “this is just what I need”, I uploaded a new file to discover that Thickbox has not been loading properly in Internet Explorer (IE) 7 or 8. Thickbox is one of those excellent JQuery functions that you just assume will always work, and when it didn’t work in popular versions of Internet explorer (both on my site and the demo site) then I thought there would be trouble.
Strangely there doesn’t seem to have been mass revolt, which given the wide spread use of Thickbox surprised me, but after digging around a bit and trying several suggestions, the thing that resolved the Thickbox showing too low in IE 7 and 8 was a simple fix to the CSS, which I found mentioned here: http://www.techbuji.com/tips/2008/12/12/thickbox-ie7-positioning-bug-fix/
Look in thickbox/thickbox.css
Around line 50, change all the below
#TB_window {
position: fixed;
background: #ffffff;
z-index: 102;
color:#000000;
display:none;
border: 4px solid #525252;
text-align:left;
top:50%;
left:50%;
}
To
#TB_window { /* my IE7 Hack*/
position: fixed;
background: #ffffff;
z-index: 102;
color:#000000;
display:none;
border: 4px solid #525252;
text-align:left;
bottom:10%;
left:50%;
}
This should fix the thickbox positioning issue in both IE 7 and IE 8.
Did you enjoy this post? Why not leave a comment below and continue the conversation, or subscribe to my feed and get articles like this delivered automatically to your feed reader.
it works perfectly.
btw, i was changing the top position first but without success.
thanks.