Page 1 of 1

Lightbox - why the big gap?

Posted: Tue Mar 04, 2014 3:13 am
by simonmlewis
Got an issue with the standard Lightbox tool.
This is a file that is uploaded - quite large. But for some reason is creates large space either side of the image, between the Next and Prev, and an even large space below it and the title (see screenshot).

I've played around the with the CSS settings but nothing is altering it.

Code: Select all

#lightbox{	
position: absolute; top: 0; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;
}

#lightbox img{ 
max-width:800px;
  width: expression(this.width > 799 ? 800: true);
height: auto;}

#lightbox a img{ border: none; }


#outerImageContainer{ position: relative; background-color: #fff; width: 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: 5px; background-color: #000; }