Hi everybody. This is my first post on this forum and I'm hoping someone out there can save the little hair I have remaining!

I am designing a family tree website which uses PHP / MySQL. The PHP generates HTML code which is validated as XHTML 1.0 Transitional and populated with data from the database. So nothing new or unusual there!

The page I'm working on uses Javascript called Leightbox to create small popups which contain images.

Here's the problem. Visit:

http://www.didymus.org.uk/new/tree/s...hp?urn=5831896

Now click on any of the four articles at the bottom of the page.

Looks fine doesn't it? But close the article and the parent page is no longer subject to its body {height:100%;} CSS. The bottom of the page is now quite a way up the browser window. Refresh your browser OR click on another article and the parent page will go back to how it should be.

At least this seems to be a problem with IE. On Firefox and Safari it appears to work just fine.

Here is my stories.css code:

html,body {
    height:100%;
    margin:0;
}
#wrapper {height:100%;}
td.back1{background:url(../../graphics/menu_crv.gif);}
td.back2{background:url(../../graphics/mag_1.gif);}
td.back3{background:url(../../graphics/mag_2.gif);}
td.back4{background:url(../../graphics/mag_3.gif);}
td.back5{background:url(../../graphics/mag_4.gif);}
td.back6{background:url(../../graphics/mfspc.gif);}
td.styl1{border-width: 1px; border-bottom-style: solid; border-bottom-color:#ffffff;}
td.bblk1{border-width: 1px; border-top-style: solid; border-left-style: solid; border-left-color:#000000; border-top-color:#000000;}
td.bblk2{border-width: 1px; border-top-style: solid; border-right-style: solid; border-right-color:#000000; border-top-color:#000000;}
td.bblk3{border-width: 1px; border-bottom-style: solid; border-bottom-color:#FFFFFF;}
td.bblk4{border-width: 1px; border-left-style: solid; border-left-color:#000000;}
td.bblk5{border-width: 1px; border-top-style: solid; border-top-color:#000000;}
td.bblk6{border-width: 1px; border-top-style: solid; border-top-color:#c2cfd5; vertical-align: middle;}
td.vat{vertical-align: top;}
td.vab{vertical-align: bottom;}
td.vac{vertical-align: middle;}
#container { 
 width: 100%;
 height: 100%;
 margin: 0 auto;
 text-align: left;
}
.footer {
 background-color: #000000;
}
.leightbox {
 color: #333;
 display: none;
 position: absolute;
 top: 25%;
 left: 25%;
 width: 50%;
 height: 50%;
 padding: 0.5em;
 border: 0.5em solid #79b4dd;
 background-color: white;
 text-align: center;
 z-index:1001;
 overflow: auto; 
}
#overlay{
 display:none;
 position:absolute;
 top:0;
 left:0;
 width:100%;
 height:100%;
 z-index:1000;
 background-color:#333;
 -moz-opacity: 0.8;
 opacity:.80;
 filter: alpha(opacity=80);
}
.lightbox[id]{ /* IE6 and below Can't See This */    position:fixed;    }#overlay[id]{ /* IE6 and below Can't See This */    position:fixed;    }

And here's the relevant section of HTML generated by stories.php:

.....
<!-- CREATE BOTTOM ROW FOR MEDIA BAR & COPYRIGHT -->
<tr>
   <td class='vab' align='center' height='75'>
<table width='100%' border='0' style='border-collapse: collapse' cellpadding='0'>
<!-- CREATE ROW FOR SCRAPBOOK -->
<tr>
<td class='bblk6' colspan='3' width='100%' align='center' height='15' bgcolor='#ffffff'>
<!-- START SCRAPBOOK TABLE -->
<table border='0' style='border-collapse: collapse' cellpadding='0' id='photos'>
 <tr>
  <td ><font face='Arial' size='1' color='#000000'><b/>SCRAPBOOK ARTICLES:&nbsp;</font></td>
  <td ><a href='#lightbox1' rel='lightbox1' class='lbOn' title='WW1 MEDAL CARD' style='text-decoration: none; font-family: Arial; font-size: 8pt; font-weight: bold'>1&nbsp;</a></td><td ><font face='Arial' size='1' color='#000000'>|</font><a href='#lightbox2' rel='lightbox2' class='lbOn' title='Cornish Guardian - Thursday 1st August 1935 - Page 10' style='text-decoration: none; font-family: Arial; font-size: 8pt; font-weight: bold'>&nbsp;2&nbsp;</a></td><td ><font face='Arial' size='1' color='#000000'>|</font><a href='#lightbox3' rel='lightbox3' class='lbOn' title='Cornish Guardian - Thursday 8th August 1935 - Page 5' style='text-decoration: none; font-family: Arial; font-size: 8pt; font-weight: bold'>&nbsp;3&nbsp;</a></td><td ><font face='Arial' size='1' color='#000000'>|</font><a href='#lightbox4' rel='lightbox4' class='lbOn' title='MEMORIAL CARD' style='text-decoration: none; font-family: Arial; font-size: 8pt; font-weight: bold'>&nbsp;4&nbsp;</a></td><td ></td><td ></td><td ></td><td ></td><td ></td><td ></td>
</tr>
</table>
<!-- END SCRAPBOOK TABLE -->
</td>
</tr>
<tr>
<td class='vat' align='center' colspan='5' bgcolor='#c2cfd5' height='1'></td></tr>
<tr>
<td class='vat' align='center' colspan='5' bgcolor='#5595cb' height='1'></td></tr>
<tr>
<td class='vac' width='20%' align='left' bgcolor='#79b4dd'>&nbsp;<a href='http://validator.w3.org/check?uri=referer'><img border='0' src='http://www.w3.org/Icons/valid-xhtml10-blue' alt='This page is certified by W3C as Valid XHTML 1.0 Transitional. The mark of a properly designed website!' height='31' width='88' /></a></td>
<td class='vat' align='center' bgcolor='#79b4dd' width='60%'><font face='Arial' size='2' color='#808080'>Media for Edwin</font><br/><a href='../../tree/censi/5831896.pdf' target='_blank'><img border='0' src='../graphics/census_on.gif' alt=''/></a><a href='certs.php?urn=5831896'><img border='0' src='../graphics/certs_on.gif' alt=''/></a><a href='photos.php?urn=5831896'><img border='0' src='../graphics/photo_on.gif' alt=''/></a><a href='stories.php?urn=5831896'><img border='0' src='../graphics/stories_on.gif' alt=''/></a></td>
<td class='vac' width='20%' align='center' bgcolor='#79b4dd'><font face='Arial' size='1' color='#000000'><font color='#ffffff'/><i/>(Hover over article number for description. Click to view. This facility requires Javascript to be enabled in your browser.)</font></td></tr>
<tr>
<td class='vat' align='center' colspan='5' height='1' bgcolor='#5595cb'></td></tr>
<tr>
<td class='vat' align='center' colspan='5' height='1' bgcolor='#c2cfd5'></td></tr>
<tr>
<td class='vat' align='right' colspan='5' bgcolor='#e0eff6'><font face='Arial' size='1' color='#000000'>v7.01 | © Copyright 2009 Kris Didymus | All Rights Reserved&nbsp;</font></td></tr></table>
</td>
</tr>
<!-- END OF BOTTOM ROW FOR MEDIA BAR & COPYRIGHT -->
</table>
<!-- START DIV FOR SCRAPBOOK POPUPS -->
<div id='wrapper' class='wrapper'>
<div id='lightbox1' class='leightbox'>
 <table border='0' style='border-collapse: collapse' width='450'>
 <tr>
  <td class='footer' align='right'><font face='Arial' size='1' color='#000000'><font color='#ffffff'/>
  (CLOSE)&nbsp;</font><a href='#' class='lbAction' rel='deactivate'>X</a>&nbsp;</td>
 </tr>
 <tr>
  <td align='center'><font face='Arial' size='1' color='#000000'>WW1 MEDAL CARD</font></td>
 </tr>
  <tr>
  <td align='center'><img src='../../tree/book/5831896-1.gif' alt='WW1 MEDAL CARD'/></td>
 </tr>
</table></div>
<div id='lightbox2' class='leightbox'>
 <table border='0' style='border-collapse: collapse' width='450'>
 <tr>
  <td class='footer' align='right'><font face='Arial' size='1' color='#000000'><font color='#ffffff'/>
  (CLOSE)&nbsp;</font><a href='#' class='lbAction' rel='deactivate'>X</a>&nbsp;</td>
 </tr>
 <tr>
  <td align='center'><font face='Arial' size='1' color='#000000'>Cornish Guardian - Thursday 1st August 1935 - Page 10</font></td>
 </tr>
  <tr>
  <td align='center'><img src='../../tree/book/5831896-2.gif' alt='Cornish Guardian - Thursday 1st August 1935 - Page 10'/></td>
 </tr>
</table></div>
<div id='lightbox3' class='leightbox'>
 <table border='0' style='border-collapse: collapse' width='450'>
 <tr>
  <td class='footer' align='right'><font face='Arial' size='1' color='#000000'><font color='#ffffff'/>
  (CLOSE)&nbsp;</font><a href='#' class='lbAction' rel='deactivate'>X</a>&nbsp;</td>
 </tr>
 <tr>
  <td align='center'><font face='Arial' size='1' color='#000000'>Cornish Guardian - Thursday 8th August 1935 - Page 5</font></td>
 </tr>
  <tr>
  <td align='center'><img src='../../tree/book/5831896-3.gif' alt='Cornish Guardian - Thursday 8th August 1935 - Page 5'/></td>
 </tr>
</table></div>
<div id='lightbox4' class='leightbox'>
 <table border='0' style='border-collapse: collapse' width='450'>
 <tr>
  <td class='footer' align='right'><font face='Arial' size='1' color='#000000'><font color='#ffffff'/>
  (CLOSE)&nbsp;</font><a href='#' class='lbAction' rel='deactivate'>X</a>&nbsp;</td>
 </tr>
 <tr>
  <td align='center'><font face='Arial' size='1' color='#000000'>MEMORIAL CARD</font></td>
 </tr>
  <tr>
  <td align='center'><img src='../../tree/book/5831896-4.gif' alt='MEMORIAL CARD'/></td>
 </tr>
</table></div>
<div id='lightbox5' class='leightbox'>
 <table border='0' style='border-collapse: collapse' width='450'>
 <tr>
  <td class='footer' align='right'><font face='Arial' size='1' color='#000000'><font color='#ffffff'/>
  (CLOSE)&nbsp;</font><a href='#' class='lbAction' rel='deactivate'>X</a>&nbsp;</td>
 </tr>
 <tr>
  <td align='center'><font face='Arial' size='1' color='#000000'></font></td>
 </tr>
  <tr>
  <td align='center'><img src='../../tree/book/blank.gif' alt=''/></td>
 </tr>
</table></div>
<div id='lightbox6' class='leightbox'>
 <table border='0' style='border-collapse: collapse' width='450'>
 <tr>
  <td class='footer' align='right'><font face='Arial' size='1' color='#000000'><font color='#ffffff'/>
  (CLOSE)&nbsp;</font><a href='#' class='lbAction' rel='deactivate'>X</a>&nbsp;</td>
 </tr>
 <tr>
  <td align='center'><font face='Arial' size='1' color='#000000'></font></td>
 </tr>
  <tr>
  <td align='center'><img src='../../tree/book/blank.gif' alt=''/></td>
 </tr>
</table></div>
<div id='lightbox7' class='leightbox'>
 <table border='0' style='border-collapse: collapse' width='450'>
 <tr>
  <td class='footer' align='right'><font face='Arial' size='1' color='#000000'><font color='#ffffff'/>
  (CLOSE)&nbsp;</font><a href='#' class='lbAction' rel='deactivate'>X</a>&nbsp;</td>
 </tr>
 <tr>
  <td align='center'><font face='Arial' size='1' color='#000000'></font></td>
 </tr>
  <tr>
  <td align='center'><img src='../../tree/book/blank.gif' alt=''/></td>
 </tr>
</table></div>
<div id='lightbox8' class='leightbox'>
 <table border='0' style='border-collapse: collapse' width='450'>
 <tr>
  <td class='footer' align='right'><font face='Arial' size='1' color='#000000'><font color='#ffffff'/>
  (CLOSE)&nbsp;</font><a href='#' class='lbAction' rel='deactivate'>X</a>&nbsp;</td>
 </tr>
 <tr>
  <td align='center'><font face='Arial' size='1' color='#000000'></font></td>
 </tr>
  <tr>
  <td align='center'><img src='../../tree/book/blank.gif' alt=''/></td>
 </tr>
</table></div>
<div id='lightbox9' class='leightbox'>
 <table border='0' style='border-collapse: collapse' width='450'>
 <tr>
  <td class='footer' align='right'><font face='Arial' size='1' color='#000000'><font color='#ffffff'/>
  (CLOSE)&nbsp;</font><a href='#' class='lbAction' rel='deactivate'>X</a>&nbsp;</td>
 </tr>
 <tr>
  <td align='center'><font face='Arial' size='1' color='#000000'></font></td>
 </tr>
  <tr>
  <td align='center'><img src='../../tree/book/blank.gif' alt=''/></td>
 </tr>
</table></div>
<div id='lightbox10' class='leightbox'>
 <table border='0' style='border-collapse: collapse' width='450'>
 <tr>
  <td class='footer' align='right'><font face='Arial' size='1' color='#000000'><font color='#ffffff'/>
  (CLOSE)&nbsp;</font><a href='#' class='lbAction' rel='deactivate'>X</a>&nbsp;</td>
 </tr>
 <tr>
  <td align='center'><font face='Arial' size='1' color='#000000'></font></td>
 </tr>
  <tr>
  <td align='center'><img src='../../tree/book/blank.gif' alt=''/></td>
 </tr>
</table></div>
</div>
<!-- END DIV FOR SCRAPBOOK POPUPS -->
</body>
</html>

Anybody got any ideas why this is happening? Okay so it doesn't affect the functionality of my page but it is very annoying as I have carefully designed the site to have a consistent appearance.

The Leightbox Javascript is freely available on the net but I'll post it here if it helps anyone.

Kindest regards.

KD.

It's obviously some issue with this "Leightbox" script so maybe you'll have better luck at their forum (if they have one?). Otherwise, there are other script like it, which I believe would not cause this problem. Have you tried Thickbox, or Lytebox?

Lizciz.

Thank you. I figured it might be the Leightbox script (which itself is a rip-off of the fantastic Lightbox script I already use for the photo section).

I will give the other two you suggested a try. Thank you for your time.

KD.

I'm not seeing that problem in Firefox or IE6, so where are you seeing this behavior ?

I WAS seeing this problem in IE 7 but I've now implemented Lytebox and it works brilliantly. It negates the need to use hidden <DIV> sections which I believe WERE causing the problems.

Thank you for your response. Like I said in my initial post (I think!) I had no problem with Firefox or Safari but IE really didn't like Leightbox!

KD.