The IE “Viewport” and Lightbox Issue

Posted on: April 14th, 2012 by Edward No Comments

Lightbox does not fill the browser window!

Do you have a Lightbox image viewer on your website? If you do, chances are, if it’s not the latest version, the background doesn’t work properly in Internet Explorer. This is especially true if you have a PHP, ASP or .NET application.

The problem is the Internet Explorer ”viewport.”  This is the visible area that occupies the browser window. And in most cases, a web page has content that is not visible within the visible area—and that’s why you get scrollbars; so you can scroll to see the content that’s not visible.

Well, with the Lightbox image viewer, even though it uses the body tag for coordinates, and even if you specify no margin, no padding and height 100% and width 100%, the background will still just fill the viewport in Internet Explorer; and ultimately, when the user scrolls the page (if the page is indeed scrollable), the Lighbox background stops displaying.

So, what’s the answer?

Make sure your stylesheet properties are valid and then…
First thing we need to do is make sure the stylesheet is doing what it needs to do. Open the stylesheet for your site and put this at the top:

html, body {
 margin: 0;
 padding: 0;
 width: 100%;
 height: 100%;
}

Now, you need to make sure none of these properties are duplicated in a body tag else where in your stylesheet or in the body tag on your page.

…if your stylesheet is in good working order, you shouldn’t have any issues with the above setting…but check your pages and make edits accordingly.

Next, you want to open the stylesheet for Lightbox (css/lightbox.css).

…at the top of “lightbox.css” enter this property

@media screen{
 body>div#overlay{
    position:fixed;
  }
}

…this basically tells any browser (and for the purposes of this solution—Internet Explorer in particular) that the Lightbox overlay is to be displayed on screen (i.e. @media screen) “greater” than the “div” containing the Lightbox code—and in return, forcing the browser to use the 100% height and width attributes in the stylesheet for the body tag.

Now, make sure you save your changes to each stylesheet and then go back to your page with Lightbox and refresh your browser. Hint, you mey need to hit “Ctrl + F5″ to force the browser to retrieve the page from the server to get the updated stylesheet attributes to take effect.

Leave a Reply

You must be logged in to post a comment.