Lightbox - why the big gap?

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
simonmlewis
DevNet Master
Posts: 4435
Joined: Wed Oct 08, 2008 3:39 pm
Location: United Kingdom
Contact:

Lightbox - why the big gap?

Post 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; }
Attachments
Bottom of Lightbox
Bottom of Lightbox
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Post Reply