Results 1 to 4 of 4

Thread: Lightbox2 pushing page to left

  1. #1
    Join Date
    Apr 2010
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Lightbox2 pushing page to left

    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;
    }

  2. #2
    Join Date
    Apr 2010
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Can anyone help with this issue?

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Apr 2010
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Well I'll be darned.... that was easy.

    Thanks!!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •