Title: [Plugin: Lightbox] Display problem
Last modified: August 19, 2016

---

# [Plugin: Lightbox] Display problem

 *  Resolved [shylaz](https://wordpress.org/support/users/shylaz/)
 * (@shylaz)
 * [17 years, 10 months ago](https://wordpress.org/support/topic/plugin-lightbox-display-problem/)
 * Hi!
    I have a few problems with the latest Lightbox, but I don’t know where these
   css issues are located. If I click on an image, I have to scroll down to close
   it.
 * [Screenshot](http://img223.imagevenue.com/img.php?image=22987_lightbox-issue_122_569lo.jpg)
 * **ligthbox.css**
 *     ```
       #lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0; bottom:30%;}
       #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(../images/prevlabel.gif) left 15% no-repeat; }
       #nextLink:hover, #nextLink:visited:hover { background: url(../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;	}
       #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; }
       ```
   
 * Any help is appreciated!
    Regards, shylaz

Viewing 6 replies - 1 through 6 (of 6 total)

 *  [Joe Hall](https://wordpress.org/support/users/redbmedia/)
 * (@redbmedia)
 * [17 years, 10 months ago](https://wordpress.org/support/topic/plugin-lightbox-display-problem/#post-799040)
 * shylaz,
 * Can you send a link to the page where this is happening?
 * Joe
 *  Thread Starter [shylaz](https://wordpress.org/support/users/shylaz/)
 * (@shylaz)
 * [17 years, 10 months ago](https://wordpress.org/support/topic/plugin-lightbox-display-problem/#post-799058)
 * Of course:
    [Link to the page where it happens](http://hookahclub.org/rendezvenyek/)(
   btw. it happens on all pages and posts, the issue is in the lightbox stylesheet).
 * Regards,
    shylaz
 *  [Joe Hall](https://wordpress.org/support/users/redbmedia/)
 * (@redbmedia)
 * [17 years, 10 months ago](https://wordpress.org/support/topic/plugin-lightbox-display-problem/#post-799085)
 * Shylaz, it works fine for me. However, I think from looking at your screen shot,
   that your problem exist from the fact that the image is to large. You might want
   to re size the originals to a height of 600px. 600 is the minimum screen height.
   Or you can try changing the following CSS code:
 *     ```
       #lightbox img{ width: auto; height: auto;}
       ```
   
 * Change the height varible:
 *     ```
       #lightbox img{ width: auto; height: 95%;}
       ```
   
 *  Thread Starter [shylaz](https://wordpress.org/support/users/shylaz/)
 * (@shylaz)
 * [17 years, 10 months ago](https://wordpress.org/support/topic/plugin-lightbox-display-problem/#post-799107)
 * Thanks for your fast reply! But what I want to do is reducing the space between
   the top and the lightbox content. Any idea?
 *  [Joe Hall](https://wordpress.org/support/users/redbmedia/)
 * (@redbmedia)
 * [17 years, 10 months ago](https://wordpress.org/support/topic/plugin-lightbox-display-problem/#post-799111)
 * Try changing the z-index to something like 50 or 25
 * `#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align:
   center; line-height: 0; bottom:30%;}`
 *  Thread Starter [shylaz](https://wordpress.org/support/users/shylaz/)
 * (@shylaz)
 * [17 years, 10 months ago](https://wordpress.org/support/topic/plugin-lightbox-display-problem/#post-799175)
 * That doesn’t work either. You’re right, the picture is simply too large. I added
   some padding, so at least it has enough place to display the close button.
 * **Final CSS:**
 * > #lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align:
   > center; line-height: 0; padding-bottom: 30px; }
 * Thanks for your help anyway, much appreciated!
 * Regards,
    shylaz

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘[Plugin: Lightbox] Display problem’ is closed to new replies.

## Tags

 * [display](https://wordpress.org/support/topic-tag/display/)

 * 6 replies
 * 2 participants
 * Last reply from: [shylaz](https://wordpress.org/support/users/shylaz/)
 * Last activity: [17 years, 10 months ago](https://wordpress.org/support/topic/plugin-lightbox-display-problem/#post-799175)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics