Results 1 to 2 of 2

Thread: Lightbox v2.03a opacity doesn't span full width?

  1. #1
    Join Date
    Feb 2005
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Lightbox v2.03a opacity doesn't span full width?

    1) Script Title: LightBox v 2.03a

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

    3) Describe problem:

    You can view the example page here (stripped down to basics):

    http://www.vikenk.com/test/pic_majestic_2006_2.htm

    The problem is in IE6, not Firefox. Try it in both.

    I really like the Lightbox scipt but I'm having a bit of difficulty in IE 6 - The opacity does NOT span the full width of the page. There is no problem in FireFox. I think the problem may have to do with a margin set in my style.

    In my css, I have the <body> left-margin set to 200px. When the script is activated, the opacity stops about 200px short of the RIGHT side of the page, and the image is off center to the left. It's almost as if the script thinks the the page is 200px shorter than it should be and centers the image on the left side of the page. When I set <body> margin to zero, the problem goes away.

    I tried to change my style by using a left padding instead of left margin, but the problem still persists. Again, setting <body> margin and padding to zero remedies the problem.

    Is this a bug or am I doing something wrong?

    Thanks.

    --
    Viken K.
    http://www.vikenk.com

  2. #2
    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

    A 200px left margin is a bit extreme. In this case, it makes the page look like it was made wrong to me, lopsided. There usually are ways to tweak IE 6 into line, though. I use IE 7 which doesn't appear to have this problem. One thing you could try is instead of applying that margin to the body tag, where it can influence the way IE 6 sees the window's dimensions, apply it to a containing division:

    Code:
    <body style="margin:0;padding:0;">
    <div style="margin:10px 10px 10px 200px;">
    
    The rest of your content here
    
    </div>
    </body>
    - John
    ________________________

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

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
  •