Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Bottom getting added to page 2

Status
Not open for further replies.
DKailen

DKailen

Technical User
Mar 6, 2010
13
US
Hi everyone,

This has got me stumped. I have a page that uses a lightbox script to show some pics.

Whenever I try to click on one of the pics to bring up the large pic in a lightbox, I get a lot of space added to the bottom on the page. You can see what I mean at
I don't believe that it is related to the lightbox script since I have seen it used on other pages without the effect that I am getting -- but of course I could be wrong about that. I think that it is related to my CSS, although at this point I am not ruling anything out completely. I know that my CSS is really messed up right now, in fact I will probably be taking the time to clean it up some here very shortly. Anyway, I will place my CSS and HTML to see if anyone can spot anything that I missed......

Thanks for looking!
Jim


CSS...

Code: 
body {
	background-color: #CED4DB;
}

a {
    text-decoration: overline underline;
}


.frame {
 	margin-left: auto;
 	margin-right: auto;
 	width: 750px;
 	text-align: left;
    min-height: 500px;
}

.main {
    background-image: url('../images/background1.png');
    width: 750px;
	margin-left: auto;
	margin-right: auto;
    min-height: 500px;
}

.header {
	background-color: #5370A3;
    background-image: url('../images/logo_W.jpg');
    height: 100px;
    background-repeat:no-repeat;
}

.container {
    width: 600px;  /* Centering for IE6+ in strict mode, Firefox, and other modern browsers */
    margin-left: 135px;
    min-height: 450px;
    margin-top: -185px;
    position: relative;
}

.left {
  float: left;
  width: 270px;
  padding: 5px;
  text-align: center;
}

.boldText {
    font-size: 18px;
    font-weight: bold;
    text-align: left;
}

.center {
     text-align: center; 
}

.adText {    
    font-size: 16px;
    font-weight: normal;
    text-align: left;
}

.head {
    font-size: 24px;
    font-weight:800;
    text-align: center;
}

.spacer {
    height: 1px;
    clear:both;
}

IMG.image {   
    margin-left: auto;
    margin-right: auto; 
}

.footer {
    width: 750px;
	background-color: #CED4DB;
    height: 25px;
	margin-left: auto;
	margin-right: auto;	
    font-size: 14px;
    color: #000;
    text-align: center;
}

#list li {
    display: inline;
    list-style-type: none;
    padding-right: 20px;
}
    
.listText {
    font-family: Arial Narrow, Georgia, serif;
    font-size: 17px;
    font-weight: bold;          
}

.name {
    font-family: Times New Roman, Georgia, Serif;
    font-size: 30px;
    font-weight: 600;
    font-style: normal;
    text-decoration: none;
    color: #ffffff;
    margin-top: 10px;
    margin-left: 255px;
}

.topSpacer {
	background-color: #36455F;
    color: #fff;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
	margin-left: auto;
	margin-right: auto;	
	height: 25px;	
}

.section {
	width: 600px;
	margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
    font-size: 14px;
    font-weight: 700;
    clear:both;
}

.clear {
    clear: both;
    display: block;
    height: 1px;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.sales {
    position: relative;
    top: 25px;
    width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.salesLeft {
    float: left;
    width: 235px;   
    text-align: center;
}

.salesRight {
    float: left;
    left: 250px;
    width: 235px;
}

.contentRight {
    width: 285px;
    float: right;
}

.contentLeft {
    width: 285px;    
    float: left;
}


<!-- Start Navigation Bar Styles -->

.navBar {
    float: left;
    width: 120px;
    margin-left: 5px;
    min-height: 550px;
}

#navcontainer  {
    margin-left: 5px;
    width: 115px;
    padding: 0;
    margin-bottom: 1em;
    font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
    background-color: #E6E7E6;
    font-weight: bold;
    color: #000;
}

#navcontainer ul  {
    list-style: none;
    margin-left: 0;
    padding: 0;
    border: none;
}

#navcontainer li  {
    border-bottom: 0px;
    margin: 0;
}

.noBorder  {
    border-bottom: 0px;
}

#navcontainer li a  {
    display: block;
    padding: 5px 5px 5px 5px;
    background-color: #E6E7E6;
    color: #000;
    text-decoration: none;
    width: 120px;
}

html>body #navcontainer li a { 
    width: auto; 
}

#navcontainer li a:hover  {
    border-left: 5px solid #E6E7E6;
    border-right: 5px solid #E6E7E6;
    background-color: #E6E7E6;
    color: #000;
}

#navcontainer li li  {
    border-top: 0;
    border-bottom: 0;
    margin: 0;
}

#navcontainer li li a  {
    display: block;
    padding: 5px 5px 5px 20px;
    background-color: #E6E7E6;
    color: #000;
    text-decoration: none;
}

#navcontainer li li li  {
    display: block;
    padding: 5px 5px 5px 25px;
    background-color: #E6E7E6;
    color: #000;
    text-decoration: none;
    border-bottom: none;
}

#navcontainer li li li a {
    display: block;
    padding: 5px 5px 5px 0px;
    background-color: #E6E7E6;
    color: #000;
    text-decoration: none;
    border-bottom: none;
}

#navcontainer li li li a:hover  {
    border-left: 0px;
    border-right: 0px;
    background-color: #E6E7E6;
    color: #000;
    border-bottom: none;
}

<!-- End Navigation Bar Styles -->

<!-- Start Menu Styles -->

#menu {
	background: #E6E7E6;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 120px;
}

#menu ul li.active { 
    padding: 0px 0px 0px 5px;
}

#menu li {
	font: 14px Verdana, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
}

#menu a {
	background: #E6E7E6;
	border-bottom: 1px solid #000;
	color: #E6E7E6;
	display: block;
	margin: 0;
	text-decoration: none;
	font-weight:normal;
}

<!-- End Menu Styles -->

<!-- Begin Lightbox Styles -->

#lbOverlay { position: fixed; top: 0; left: 0; z-index: 99998; width: 100%; height: 500px; }
	#lbOverlay.grey { background-color: #000000; }
	#lbOverlay.red { background-color: #330000; }
	#lbOverlay.green { background-color: #003300; }
	#lbOverlay.blue { background-color: #011D50; }
	#lbOverlay.gold { background-color: #666600; }

#lbMain { position: absolute; left: 0; width: 100%; z-index: 99999; text-align: center; line-height: 0; }
#lbMain a img { border: none; }

#lbOuterContainer { position: relative; background-color: #fff; width: 200px; height: 200px; margin: 0 auto; }
	#lbOuterContainer.grey { border: 3px solid #888888; }
	#lbOuterContainer.red { border: 3px solid #DD0000; }
	#lbOuterContainer.green { border: 3px solid #00B000; }
	#lbOuterContainer.blue { border: 3px solid #5F89D8; }
	#lbOuterContainer.gold { border: 3px solid #B0B000; }

#lbDetailsContainer {	font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; width: 100%; line-height: 1.4em;	overflow: auto; margin: 0 auto; }
	#lbDetailsContainer.grey { border: 3px solid #888888; border-top: none; }
	#lbDetailsContainer.red { border: 3px solid #DD0000; border-top: none; }
	#lbDetailsContainer.green { border: 3px solid #00B000; border-top: none; }
	#lbDetailsContainer.blue { border: 3px solid #5F89D8; border-top: none; }
	#lbDetailsContainer.gold { border: 3px solid #B0B000; border-top: none; }

#lbImageContainer, #lbIframeContainer { padding: 10px; }
#lbLoading {
	position: absolute; top: 45%; left: 0%; height: 32px; width: 100%; text-align: center; line-height: 0; background: url(../images/loading.gif) center no-repeat;
}

#lbHoverNav { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#lbImageContainer>#lbHoverNav { left: 0; }
#lbHoverNav a { outline: none; }

#lbPrev { width: 49%; height: 100%; background: transparent url(../images/blank.gif) no-repeat; display: block; left: 0; float: left; }
	#lbPrev.grey:hover, #lbPrev.grey:visited:hover { background: url(../images/prev_grey.gif) left 15% no-repeat; }
	#lbPrev.red:hover, #lbPrev.red:visited:hover { background: url(../images/prev_red.gif) left 15% no-repeat; }
	#lbPrev.green:hover, #lbPrev.green:visited:hover { background: url(../images/prev_green.gif) left 15% no-repeat; }
	#lbPrev.blue:hover, #lbPrev.blue:visited:hover { background: url(../images/prev_blue.gif) left 15% no-repeat; }
	#lbPrev.gold:hover, #lbPrev.gold:visited:hover { background: url(../images/prev_gold.gif) left 15% no-repeat; }
	
#lbNext { width: 49%; height: 100%; background: transparent url(../images/blank.gif) no-repeat; display: block; right: 0; float: right; }
	#lbNext.grey:hover, #lbNext.grey:visited:hover { background: url(../images/next_grey.gif) right 15% no-repeat; }
	#lbNext.red:hover, #lbNext.red:visited:hover { background: url(../images/next_red.gif) right 15% no-repeat; }
	#lbNext.green:hover, #lbNext.green:visited:hover { background: url(../images/next_green.gif) right 15% no-repeat; }
	#lbNext.blue:hover, #lbNext.blue:visited:hover { background: url(../images/next_blue.gif) right 15% no-repeat; }
	#lbNext.gold:hover, #lbNext.gold:visited:hover { background: url(../images/next_gold.gif) right 15% no-repeat; }

#lbPrev2, #lbNext2 { text-decoration: none; font-weight: bold; }
	#lbPrev2.grey, #lbNext2.grey, #lbSpacer.grey { color: #333333; }
	#lbPrev2.red, #lbNext2.red, #lbSpacer.red { color: #620000; }
	#lbPrev2.green, #lbNext2.green, #lbSpacer.green { color: #003300; }
	#lbPrev2.blue, #lbNext2.blue, #lbSpacer.blue { color: #01379E; }
	#lbPrev2.gold, #lbNext2.gold, #lbSpacer.gold { color: #666600; }
	
#lbPrev2_Off, #lbNext2_Off { font-weight: bold; }
	#lbPrev2_Off.grey, #lbNext2_Off.grey { color: #CCCCCC; }
	#lbPrev2_Off.red, #lbNext2_Off.red { color: #FFCCCC; }
	#lbPrev2_Off.green, #lbNext2_Off.green { color: #82FF82; }
	#lbPrev2_Off.blue, #lbNext2_Off.blue { color: #B7CAEE; }
	#lbPrev2_Off.gold, #lbNext2_Off.gold { color: #E1E100; }
	
#lbDetailsData { padding: 0 10px; }
	#lbDetailsData.grey { color: #333333; }
	#lbDetailsData.red { color: #620000; }
	#lbDetailsData.green { color: #003300; }
	#lbDetailsData.blue { color: #01379E; }
	#lbDetailsData.gold { color: #666600; }

#lbDetails { width: 60%; float: left; text-align: left; }
#lbCaption { display: block; font-weight: bold; }
#lbNumberDisplay { float: left; display: block; padding-bottom: 1.0em; }
#lbNavDisplay { float: left; display: block; padding-bottom: 1.0em; }

#lbClose { width: 64px; height: 28px; float: right; margin-bottom: 1px; }
	#lbClose.grey { background: url(../images/close_grey.png) no-repeat; }
	#lbClose.red { background: url(../images/close_red.png) no-repeat; }
	#lbClose.green { background: url(../images/close_green.png) no-repeat; }
	#lbClose.blue { background: url(../images/close_blue.png) no-repeat; }
	#lbClose.gold { background: url(../images/close_gold.png) no-repeat; }

#lbPlay { width: 64px; height: 28px; float: right; margin-bottom: 1px; }
	#lbPlay.grey { background: url(../images/play_grey.png) no-repeat; }
	#lbPlay.red { background: url(../images/play_red.png) no-repeat; }
	#lbPlay.green { background: url(../images/play_green.png) no-repeat; }
	#lbPlay.blue { background: url(../images/play_blue.png) no-repeat; }
	#lbPlay.gold { background: url(../images/play_gold.png) no-repeat; }
	
#lbPause { width: 64px; height: 28px; float: right; margin-bottom: 1px; }
	#lbPause.grey { background: url(../images/pause_grey.png) no-repeat; }
	#lbPause.red { background: url(../images/pause_red.png) no-repeat; }
	#lbPause.green { background: url(../images/pause_green.png) no-repeat; }
	#lbPause.blue { background: url(../images/pause_blue.png) no-repeat; }
	#lbPause.gold { background: url(../images/pause_gold.png) no-repeat; }

<!-- End Lightbox Styles -->

<!-- Begin Horizontal Nav Bar -->

#miniflex {
	width: 100%;
	float: left;
	font-size: 14px; /* could be specified at a higher level */
	margin: 0;
	padding: 0 10px 0 10px;
	}

#miniflex li {
	float: left;
	margin: 0; 
	padding: 0;
	display: inline;
	list-style: none;
	font-size: 20px;
	}
	
#miniflex a:link, #miniflex a:visited {
	float: left;
	font-size: 85%;
	line-height: 20px;
	font-weight: bold;
	margin: 0 10px 0 10px;
	text-decoration: none;
	color: #000;
	}

#miniflex a.active:link, #miniflex a.active:visited, #miniflex a:hover {
	border-bottom: 4px solid #000;
	color: #000;
	}

.contain {
    height: 15px;
	margin: 20px 0 0 0;
	background: #fff;
    padding-bottom: 5px;
	border-bottom: 2px solid #000;
	}

<!-- End Horizontal Nav Bar -->

HTML...
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en" lang="en">
<head>
  <title>Waynesboro Heritage Foundation Test Page</title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <link rel="StyleSheet" type="text/css" href="css/styles.css" media="screen"/>  
  
  <script type="text/javascript" src="js/lytebox.js"></script>

</head>

<body>

<div class="frame">  <!-- Start frame Div -->

<div class="main">  <!-- Start Main Div -->
	  
	<div class="header">  <!-- Open Header Div -->
        <div class="name">Waynesboro Heritage Foundation</div> 
	</div>  <!-- Close Header Div -->
		  
    <div class="topSpacer">  <!-- Open topSpacer Div -->
		420 W. Main St.&nbsp; &nbsp; P.O. Box 517&nbsp; &nbsp; Waynesboro, Va., 22980&nbsp; &nbsp; phone/fax: (540) 943-3943&nbsp; &nbsp; Email: museum@ntelos.net
	</div>  <!-- Close topSpacer Div -->

	<div id="navBar">  <!-- Open navBar Div -->
		
          <div id="navcontainer">  <!-- Open navcontainer Div -->
		  
            <ul id="menu">
			
              <li>		
                  		<a href="index.html">Home</a>	
			  </li>			  
              <li>
			  	<ul>
					<li class="active">    
                <a href="merchandise.html">Shop WHF</a>	
				    </li>
				</ul>	   
			  </li>
              <li>
                <a href="donations.html">Donate</a>
			  </li>
			  <li>
                <a href="exhibits.html">Exhibits</a>
			  </li>			  
            </ul>
		     	<form removed for security>

          </div>  <!-- Close navcontainer -->
		  
    </div>  <!-- Close navBar -->
		
	<div class="container">   <!-- Open Main Container -->

	<div class="contain">
	
	<ul id="miniflex">
	<li id="active"><a href="#">Books</a></li>
	<li><a href="#">Christmas Ornaments</a></li>
	<li><a href="#">Novelties</a></li>
	<li><a href="#">Pictures</a></li>
	<li><a href="#">Shirts</a></li>
</ul>

 </div>
	
	<span class="spacer"> &nbsp; </span>
	
	<div class="section">    <!-- Open sales div -->
					
		<div class="left">  <!-- Begin salesLeft div -->
			<a href="images/shop_pics/battleShirt.jpg" rel="lytebox"><img src="images/shop_pics/battleShirt_small.jpg" width="162" height="100" border="0"></a>
<form removed for security>
</div>
			
		  </div>  <!-- Close salesLeft div -->		  
	
		<div class="left">  <!-- Begin salesRight div -->
			<a href="images/shop_pics/WHFshirt.jpg" rel="lytebox"><img src="images/shop_pics/WHFshirt_small.jpg" width="162" height="100" border="0"></a>
			<form removed for security>
		  </div>  <!-- Close salesRight div -->	
		  
	</div>	<!-- Close sales div -->
<div class="clear">&nbsp; </div>
	<div class="section">    <!-- Open sales div -->
					
		<div class="left">  <!-- Begin salesLeft div -->
		<a href="images/shop_pics/History1900.jpg" rel="lytebox"><img src="images/shop_pics/History1900_small.jpg" width="75" height="86" alt="" border="0"></a>
		<p>This book chronicles the history of Waynesboro up to 1900.</p>
		<form removed for security>
		  </div>  <!-- Close salesLeft div -->
		  	
		<div class="left">  <!-- Begin salesRight div -->
			
			<a href="images/shop_pics/History1900-76.jpg" rel="lytebox"><img src="images/shop_pics/History1900-76_small.jpg" width="75" height="96" alt="" border="0"></a>
			<p>This book chronicles the history of Waynesboro from 1900 to 1976.</p>
			<form removed for security>
		  </div>  <!-- Close salesRight div -->	
		  
	</div>	<!-- Close sales div -->	
	
		<div class="clear">&nbsp; </div>  	
	
	</div>  <!-- Close Museums div -->
	
	</div>  <!-- Close Main Container -->

</div>   <!-- Close Main Div -->

	<div class="footer">  <!-- Open footer -->
		<p>&copy; Copyright 2010 Waynesboro Heritage Foundation<br />
		Web Site Designed by Jim Farthing</p>
	</div>  <!-- Close footer -->

</div>   <!-- Close frame Div -->

</body>
</html>
 
Sort by date Sort by votes
Perhaps validating your CSS file would help?

You are using HTML-style comments which are illegal, and are thus causing browsers to ignore everything following them, including the lytebox styles.

Hope this helps,

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:
Code Couch Snippets & Info:
The Out Atheism Campaign
 
Upvote 0 Downvote
Dan is completely correct. The affected line is this one:
Code: 
#lbOverlay { position: fixed; ...
On your page, this line is not detected and thus lbOverlay loads at the bottom of your page, rather than absolutely (or fixed) positioned on top.

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]
 
Upvote 0 Downvote
Thanks Gentlemen,

For some reason I always forget about validating....

Thanks again, both of you have a star for that one!

Jim
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
132
lmcate
lmcate
bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
411
bdwilcox
bdwilcox
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
822
Chris Miller
Chris Miller
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
409
pmonett
pmonett
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
714
Mike Lewis
Mike Lewis

Part and Inventory Search

Sponsor

Back
Top