Lightbox IE position problem

[DamanC]

Hi Guys,

 

Just having a slight problem with the Jquery lightbox.

 

As always, works great in firefox, just not IE.

 

When clicking an image the popup is displayed in the center of the screen, except if you scroll down. I have images below my product options, so when you click one the popup darts to the top tof the page and "centers" itself as if the page is only 800 x 600, 1024 x 768, 1280 x 1024 etc. The result is if you are towards the bottom of the page, the lightbox pops up off the page. I can see it confusing the end user.

 

Firefox - the popup is displayed in the center of wherever you are on the page. Perfect

 

Rather hard to explain.

 

This is my Prettyphoto.css

 

Any input appreciated :)

 

/* ------------------------------------------------------------------------
This you can edit.
------------------------------------------------------------------------- */

div.pictureHolder .top .left { background: url(../images/prettyPhoto/tl.gif) top left no-repeat;} /* Top left corner */
div.pictureHolder .top .middle { background: #fff; } /* Top pattern/color */
div.pictureHolder .top .right { background: url(../images/prettyPhoto/tr.gif) top left no-repeat; } /* Top right corner */

div.pictureHolder .content a.next:hover { background: url(../images/prettyPhoto/btnNext.gif) center right no-repeat; cursor: pointer;outline:none; } /* Next button */
div.pictureHolder .content a.previous:hover { background: url(../images/prettyPhoto/btnPrevious.gif) center left no-repeat; cursor: pointer;outline:none; } /* Previous button */
div.pictureHolder .content a.close { width: 100px; height: 26px; background: url(../images/prettyPhoto/btnClose.gif) no-repeat; cursor: pointer;outline:none; } /* Close button */

div.pictureHolder .bottom .left { background: url(../images/prettyPhoto/bl.gif) top left no-repeat; } /* Bottom left corner */
div.pictureHolder .bottom .middle { background: #fff; } /* Bottom pattern/color */
div.pictureHolder .bottom .right { background: url(../images/prettyPhoto/br.gif) top left no-repeat; } /* Bottom right corner */

div.pictureHolder .loaderIcon { background: url(../images/prettyPhoto/loader.gif) top left no-repeat; } /* Loader icon */

/* ------------------------------------------------------------------------
DO NOT CHANGE
------------------------------------------------------------------------- */

div.prettyPhotoOverlay {
	background: #000;
	position: absolute; top: 0; left: 0;
	z-index: 2;
	width: 100%;
}

div.pictureHolder {
	position: absolute; z-index: 3;
	top: 50%; left: 50%;
	width: 100px;
}

	div.pictureHolder .top {
		position: relative;
		height: 20px;
	}
		* html div.pictureHolder .top { padding: 0 20px; }

		div.pictureHolder .top .left {
			position: absolute;
			left: 0;
			width: 20px; height: 20px;
		}
		div.pictureHolder .top .middle {
			position: absolute;
			left: 20px; right: 20px;
			height: 20px;
		}
			* html div.pictureHolder .top .middle { position: static; }

		div.pictureHolder .top .right {
			position: absolute;
			top: 0; left: auto; right: 0;
			width: 20px; height: 20px;
		}

	div.pictureHolder .content {
		position: relative;
		background-color: #fff;
		text-align: left;
		width: 100%; height: 40px;
	}

		div.pictureHolder .content .details {
			display: none;
			margin: 15px 15px 0 20px;
		}
			div.pictureHolder .content .details p { float: left; clear: left; margin: 0; }

	div.pictureHolder .content div.hoverContainer {
		position: absolute; z-index: 2000;
		top: 0; left: 0;
		width: 100%;
	}

	div.pictureHolder .content a.next {
		position: relative; z-index: 2000;
		display: block; float: right;
		text-indent: -10000px;
		width: 49%; height: 100%;
		background: url(../images/en/buttons/btnNext.gif) 10000px 50% no-repeat; /* Need to be defined that way to fix an IE bug */
		outline:none;
	}	

	div.pictureHolder .content a.previous {
		cursor: pointer;
		display: block;
		text-indent: -10000px;
		width: 49%; height: 100%;
		background: url(../images/en/buttons/btnPrevious.gif) -10000px 50% no-repeat; /* Need to be defined that way to fix an IE bug */ 
		outline:none;
	}

	div.pictureHolder .content a.close {
		float: right;
		display: block;
		text-indent: -10000px;
		outline:none;
	}

	div.pictureHolder .bottom {
		position: relative;
		height: 20px;
	}
		* html div.pictureHolder .bottom { padding: 0 20px; }

		div.pictureHolder .bottom .left {
			position: absolute;
			left: 0;
			width: 20px; height: 20px;
		}
		div.pictureHolder .bottom .middle {
			position: absolute;
			left: 20px; right: 20px;
			height: 20px;
		}
			* html div.pictureHolder .bottom .middle { position: static; }

		div.pictureHolder .bottom .right {
			position: absolute;
			top: 0; left: auto; right: 0;
			width: 20px; height: 20px;
		}

	div.pictureHolder .loaderIcon {
		display: none;
		position: absolute;
		top: 50%; left: 50%;
		margin: -16px 0 0 -16px;
		width: 32px; height: 32px;
	}

	div.pictureHolder #fullResImage { display: block; margin: 0 auto; }

[DamanC]

Solved it - installed light box 2!