<?php /*******************************************sel1**************************************************************/?> <div id="sel-book_1" style="float: left; margin: 0px 0px 0px 5px; width: 188px; height: 493px;"> <?php /*****************************************table1****************************************************************/?> <?php $count= 1; ?> <div style="position: relative; margin: 0px 0px 0px 0px; background-color: #7A1010; width: 183px; height: 19px; border: 1px solid #7A1010; color: white; text-align: left; padding: 0px 0px 0px 5px;" onmouseover="document.getElementById('filltable<?php echo $count; ?>').style.display= 'block'; " onmouseout="document.getElementById('filltable<?php echo $count; ?>').style.display = 'none';"> <div id="tbl_<?php echo $count; ?>" style="margin: 0px 0px 0px 0px; background-color: #7A1010; width: 183px; height: 19px; border: 1px solid #7A1010; color: white; font-weight: bold; text-align: left; padding: 0px 0px 0px 0px;">Select A Source</div> <div id="filltable<?php echo $count; ?>" style="background-color: #EAE8C8; margin: 0px 0px 0px 0px; width: 188px; height: 121px; border: 1px solid #7A1010; overflow-y: auto; overflow-x: hidden;"></div> </div> <?php /*******************************************end table1**************************************************************/?> <?php /*****************************************book1****************************************************************/?> <div style="position: relative;" onmouseover="document.getElementById('fillbook<?php echo $count; ?>').style.display= 'block';" onmouseout="document.getElementById('fillbook<?php echo $count; ?>').style.display = 'none';"> <div style="position: relative; margin: 5px 0px 0px 0px; background-color: #7A1010; width: 183px; height: 19px; border: 1px solid #7A1010; color: white; font-weight: bold; text-align: left; padding: 0px 0px 0px 5px;">Select A Book</div> <div id="fillbook<?php echo $count; ?>" style="background-color: #EAE8C8; margin: 0px 0px 0px 0px; width: 188px; height: 121px; border: 1px solid #7A1010; overflow-y: auto; overflow-x: hidden;"></div> </div> <?php /*******************************************end book1**************************************************************/?> <?php /*****************************************chapter1****************************************************************/?> <?php $count= 1; ?> <div style="position: relative;" onmouseover="document.getElementById('fillchapter<?php echo $count; ?>').style.display= 'block';" onmouseout="document.getElementById('fillchapter<?php echo $count; ?>').style.display = 'none';"> <div id="chap_<?php echo $count; ?>" style="margin: 5px 0px 0px 0px; background-color: #7A1010; width: 183px; height: 19px; border: 1px solid #7A1010; color: white; font-weight: bold; text-align: left; padding: 0px 0px 0px 5px;">Select A Chapter</div> <div id="fillchapter<?php echo $count; ?>" style="position: absolute; top: 100%; background-color: #EAE8C8; margin: 0px 0px 0px 0px; padding: 0px 5px 0px 5px; width: 178px; border: 1px solid #7A1010; overflow-x: hidden; overflow-y: auto; display: none; z-index: 1;"></div> </div> <?php /*******************************************end chapter1**************************************************************/?> <?php /*****************************************verse1****************************************************************/?> <div style="position: relative;" onmouseover="document.getElementById('fillverse<?php echo $count; ?>').style.display= 'block';" onmouseout="document.getElementById('fillverse<?php echo $count; ?>').style.display = 'none';"> <div id="ver_<?php echo $count; ?>" style="margin: 5px 0px 0px 0px; background-color: #7A1010; width: 183px; height: 19px; border: 1px solid #7A1010; color: white; font-weight: bold; text-align: left; padding: 0px 0px 0px 5px;">Select A Verse</div> <div id="fillverse<?php echo $count; ?>" style="position: absolute; top: 100%; background-color: #EAE8C8; margin: 0px 0px 0px 0px; padding: 0px 5px 0px 5px; width: 178px; border: 1px solid #7A1010; overflow-x: hidden; overflow-y: auto; display: none; z-index: 1;"></div> </div> <?php /*******************************************end verse1**************************************************************/?> <?php /*****************************************text1****************************************************************/?> <div id="filltext<?php echo $count; ?>"> <div style="float: left; margin: 5px 0px 0px 0px; background-color: #7A1010; width: 183px; height: 19px; border: 1px solid #7A1010; color: white; font-weight: bold; text-align: left; padding: 0px 0px 0px 5px;"></div> <div style="float: left; background-color: #EAE8C8; margin: 0px 0px 0px 0px; width: 188px; height: 410px; border: 1px solid #7A1010;"> </div> </div> <?php /*******************************************end text1**************************************************************/?> </div> <?php /*******************************************end sel1**************************************************************/?> PHP: For some reason the boxes don't line up properly and the z-index doesn't work. The 2nd listbox overlaps the first.
The height on the first container. Remove the red code and it should work. <?php /*******************************************sel1**************************************************************/?> <div id="sel-book_1" style="float: left; margin: 0px 0px 0px 5px; width: 188px; height: 493px;"> <?php /*****************************************table1****************************************************************/?> <?php $count= 1; ?> <div style="position: relative; margin: 0px 0px 0px 0px; background-color: #7A1010; width: 183px; [COLOR="red"]height: 19px[/COLOR]; border: 1px solid #7A1010; color: white; text-align: left; padding: 0px 0px 0px 5px;" onmouseover="document.getElementById('filltable<?php echo $count; ?>').style.display= 'block'; " onmouseout="document.getElementById('filltable<?php echo $count; ?>').style.display = 'none';"> Code (markup):