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/dynamici...box2/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:

Code:

<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:

Code:

.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!!

Thread: Lightbox2 pushing page to left

Thread Tools

Search Thread

Lightbox2 pushing page to left

Bookmarks

Bookmarks

Posting Permissions