PDA

View Full Version : Lightbox2 pushing page to left



slackjeep
05-04-2010, 08:16 PM
1) Script Title:
Lightbox image viewer 2.03a (I'm using v2.04)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm

3) Describe problem:

My site is configured to have auto left and right margins so it floats in the center of any web browser. However, the page with the lightbox treatment is forced to the left with 0 margin. I'm not sure what piece of lightbox is causing this to happen. I've played with #overlay, #lightbox and #outerimageContainer but I can't seem to get lightbox to release the margin to auto on the page.

website is www.dspdesignworks.com/photo.html

The lightbox CSS code is

@charset "UTF-8";
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../lightbox2.04/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../lightbox2.04/images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }

#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; padding-top: 1.0em;}
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}

#overlay{
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
background-color: #000;
}

page CSS:

body {
background-color: #FFF;
margin: 0px;
padding: 0px;
}

main page wrapper

#container {
width: 960px;
margin-right: auto;
margin-left: auto;
background-color: #FFF;
position: relative;
}

where the images are

#bottomContainerPhoto {
float: left;
width: 350px;
margin-left: 50px;
margin-top: -125px;
}

slackjeep
05-08-2010, 05:07 PM
Can anyone help with this issue?

jscheuer1
05-08-2010, 05:52 PM
It has nothing to do with Lightbox. On the photo page you've added this class:


<body class="floatleft" onload="MM_preloadImages('images/abouthover75.png','images/bodiethumb.png','images/bygduck.png','images/champagnethumb.png','images/scorethumb.png','images/deadhorsepointthumb.png','images/discdogsthumb.png','images/homewkrthum . . .

to the body tag. That class is in your css/dsp_v2.css file as:


.floatleft {
float: left;
clear: left;
}

Thats what's causing the trouble. Remove that class from your body tag.

slackjeep
05-15-2010, 01:10 AM
Well I'll be darned.... that was easy.

Thanks!!