Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Mar 2005
    Posts
    735
    Thanks
    4
    Thanked 1 Time in 1 Post

    something wrong with css in these listboxes

    PHP Code:
    <?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**************************************************************/?>
    For some reason the boxes don't line up properly and the z-index doesn't work. The 2nd listbox overlaps the first.
    Compare bible texts (and other tools):
    TheWheelofGod

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Drop all absolute positions.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •