Link to home
Start Free TrialLog in
Avatar of marms676
marms676

asked on

Thickbox positioning problems in IE 8

I am having problem with a page I use thickbox on. If you are using IE 8 and you scroll way down the page and then click a link that pulls thickbox content, then the content show at the top of the page without the user knowing it. To them it just looks like the screen grays out. In FireFox it works correctly and even stays centered as you scroll down.

Example:
http://www.mentorhope.com/bookprogram2.php?bdate=03-2009

I found a site that claimed to have a patched thickbox js for this and replaced it, but it is still doing it:
http://jamiethompson.co.uk/web/2008/03/17/thickbox-31-ie7-positioning-bug/

In my application I am looping over records via PHP and giving each element a unique name based on the primary key of the table.

How can this be fixed
<a href="#TB_inline?height=300&width=350&inlineId=hiddenModalContent5381&modal=true" class="thickbox">A New pair of Glasse</a>

<div id="hiddenModalContent5381" style="display:none">
	<h3>Member Book Review</h3><br>
	<p>
	<b>Title:</b> A New pair of Glasse<br>
	<b>Author:</b> Chuck C<br>
	<b>Reader:</b> Sharon H.<br>
	<b>No. of Pages:</b> 181<br>
	<b>Recommend:</b> OK<br><br>
	<b>What the reader found interesting.</b><br> I learned to Step outside of myselk and look at the world<br><br>
	<b>What action the reader will take after reading.</b> To sat y focus and keep me head up to the sky<br>
	</p>
	<p style="text-align:center"><input type="submit" id="Login" value="&nbsp;&nbsp;Close Window&nbsp;&nbsp;" onclick="tb_remove()" /></p>
</div>

Open in new window

Avatar of copyPasteGhost
copyPasteGhost
Flag of Canada image

Avatar of marms676
marms676

ASKER

copyPasteGhost,

I tried both of those and neither fixed the issue.
BTW: Both of those are from people that saying things like. "It was showing on the bottom of the screen in ie8 and just half of the image" which is not the problem my demo page is having. My problem is that if one scrolls down and clicks a thickbox link, then thickbox will show at the very top of the page outside of the view of the user instead of in the center of the screen.
Your page has 1130 validation errors (http://tinyurl.com/25pqshu). Unfortunately anything could be causing your problem. If it looks right in ie7 and you don't want to start debugging your page, I would recommend dropping the emulate ie7 tag in the head. This should go right under the <head> tag. It will tell ie8 to render like ie7.

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
ASKER CERTIFIED SOLUTION
Avatar of Eddie Shipman
Eddie Shipman
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial