Lightbox 2 – problem with IE

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.

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: https://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?

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?

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):
https://kikatus.net/wordpress/portfolio/vektoripiirrokset/

…But this page wrong (PAGE2):
https://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: https://i2.photobucket.com/albums/y5/anselmiina/example.jpg

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.

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: https://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: https://i2.photobucket.com/albums/y5/anselmiina/example3.jpg

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
https://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 https://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
https://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?