WordPress.org

Ready to get started?Download WordPress

Forums

Lightbox 2 - problem with IE (8 posts)

  1. anselmiina
    Member
    Posted 4 years ago #

    I'm using a plugin called Lightbox 2.2.8.2. With other browsers it works fine but in IE the background is just plain black. Any ideas how to get this plugin to work as it should?

  2. alexlibby
    Member
    Posted 4 years ago #

    Hi anselmiina,

    When you say it is plain black, I assume you mean it is solid black, and not partially transparent, as it should be? Have you checked the settings in WP Admin? There is an option to change the Lightbox Appearance, which should be set to black if in doubt. Which version of IE and WP are you using? I'm using WP 2.8.4 and IE 8 - both work absolutely fine for this plugin.

  3. anselmiina
    Member
    Posted 4 years ago #

    Yes excactly, the background should be partially transparent but IE shows the background as black. Firefox and Opera shows the background correctly.

    Currently I'm using the black-theme for Lightbox. I tested to change the theme but the background just changes color; it still doesn't show as partially transparent. I'm also using WP 2.8.4 and IE8. First I thought there must be something wrong with my other files but the problem was the same when I chose the WP Default -theme instead of the theme I've created for my site.

    Is it possible that there's something wrong with my browser settings because all the other browsers I've tested shows the site correctly? Internet Explorer shows the lightbox even on this site with solid black background: http://www.huddletogether.com/projects/lightbox2/ . Is it just my computer/IE that shows the site wrong? Can you see a partly transparent backround or just a solid black?

  4. alexlibby
    Member
    Posted 4 years ago #

    Hi Anselmiina,

    This is interesting - I only see a transparent black background in IE 8, on both the Lightbox JS and a local development site I am working on. One thing you could check, although I am not sure if it will make a difference:

    element.style {
    height:1082px;
    opacity:0.8;
    width:1263px;
    }

    I think this is the CSS behind the opacity setting for Lightbox - the line of interest is the opacity:0.8. To check this - see if you can get IE Developer Toolbar installed; it is the same as Firebug, and will let you check the CSS being used. Do this on your site - what setting do you get back?

  5. anselmiina
    Member
    Posted 4 years ago #

    Okay, this is extremely weird. I don't know what I did, but suddenly the Lightbox started to work on ONE page. All the pages use the same page template, the only difference is the content.

    My IE shows this page correctly (PAGE1):
    http://kikatus.net/wordpress/portfolio/vektoripiirrokset/

    ...But this page wrong (PAGE2):
    http://kikatus.net/wordpress/portfolio/verkkosivut/

    I think that my problem has something to do with the lenght of content of the page. When I took away few pictures from the PAGE2, it started to work as it should. I'm totally confused.

    Also, I have other problem with IE as well when the page is working as it should. When I click the last picture on the bottom of the page and the picture is longer than the "normal" content of the page, the darker background ends where the page normally would end. Check out this picture to understand what I mean: http://i2.photobucket.com/albums/y5/anselmiina/example.jpg

  6. alexlibby
    Member
    Posted 4 years ago #

    Hi Anselmiina,

    I agree - this is really confusing! I still cannot replicate the issue anywhere when I check in IE8 and FF2. At the moment, the only two things I can suggest at the moment are:

    1. Have you set a minimum screensize within your CSS files? If so, is it any higher than 1024 x 768?

    2. From my experience - lightbox scripts tend not to work so well when used on some images that are not in proportion. On the images that you have, where the overlay is stopping short of the whole screen - what happens if you temporarily resize the image by say 30-40%? I'm not suggesting that it be a permanent change, but if you resize it and it then works, it is something to think about...

    I will continue looking at it - if I see anything, I will post.

  7. anselmiina
    Member
    Posted 4 years ago #

    1. No, I haven't set any minimum screensize. And I can't find anything in my CSS files that could be the reason for this weird problem.

    2. This problem happens every time when the picture goes over the original content of the site. There's no problem with bigger photos IF the photo is in the beginning of the page and it doesn't go over the normal lenght of the page. I made a new picture just to show that this happends even with smaller photos: http://i2.photobucket.com/albums/y5/anselmiina/example2-1.jpg

    And this is how the same picture shows with Firefox and how it should show while browsing with IE as well: http://i2.photobucket.com/albums/y5/anselmiina/example3.jpg

  8. alexlibby
    Member
    Posted 4 years ago #

    I'm still no closer, although I have been playing with the CSS using IE's Developer Toolbar that is available; if you put IE into Quirks Mode, it will display the image higher up, but with all of the content justified to the left. It does display the black overlay over all of the page though.

    I have found this as well:

    SRC
    http://kikatus.net/wordpress/kuvat/auto.jpg

    Actual Width
    526px
    Actual Height
    744px

    Adjusted Width
    526px
    Adjusted Height
    526px

    Alt text
    [Empty Alt Value]

    Title text
    [Empty Title Value]

    File Size
    73459 bytes

    DYNSRC
    [No DYNSRC]

    LOWSRC
    [No LOWSRC]

    This is the report on the final image at the bottom of the http://kikatus.net/wordpress/portfolio/vektoripiirrokset/, which as I understand it, is having the problem; it shows the image size as being different to the other ones. This is the same report for one of the others that works:

    SRC
    http://kikatus.net/wordpress/kuvat/enkeli_pieni.jpg

    Actual Width
    300px
    Actual Height
    140px

    Adjusted Width
    300px
    Adjusted Height
    300px

    Alt text
    Enkeli

    Title text
    [Empty Title Value]

    File Size
    -1 bytes

    DYNSRC
    [No DYNSRC]

    LOWSRC
    [No LOWSRC]

    I'm not sure if this is anything, but I suspect the size of the image at the bottom of this page is causing an issue; are you able to try with an smaller one temporarily, to see if this makes a difference?

Topic Closed

This topic has been closed to new replies.

About this Topic