#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2000
    Location
    Kearns, Utah, USA
    Posts
    16
    Rep Power
    0

    Question


    Has anyone had a problem with creating a css layer and positioning it over a combo box in IE (5.5)? I have already tried putting my combo box on a seperate layer and positioning it below the other layer but still can't seem to get the combo box to go beneath the css layer.

    What I am actually doing is having a drop down menu, when the menu drops down it is being positioned over a combo box that is already on the page.

    Any help would be great! Thanks.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2001
    Location
    (Slave only) NY, NY USA
    Posts
    34
    Rep Power
    14

    combo box/layer


    try this. allows you to show & hide controls in the same space by manipulating visibility of the layers.



    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
    <HTML>
    <HEAD>
    <TITLE>How to Hide Form Elements</TITLE>
    <style type="text/css">
    <!--
    #controlSection {
    position:absolute;
    width: 350px;
    height: 250px;
    top: 0;
    left: 0;
    visibility:visible;
    font-size: 12pt;
    background: Silver;
    color : Maroon;
    border : thin dotted Black;
    }

    #explainations {
    background-color: Teal;
    color: White;
    font-size: 12pt;
    border: medium outset Silver;
    height : auto;
    position: absolute;
    top: 0;
    width: auto;
    left: 360;
    height: auto;
    visibility: visible;
    }

    #divtag1 { visibility:visible;
    position:absolute;
    top:300px;
    left:10;
    height:75;
    width:300;
    font-size: 10pt;
    background:yellow;
    border : thin dotted Black;
    }

    #divtag2 { visibility:hidden;
    position:absolute;
    top:300;
    left:10;
    height:75;
    width:300;
    font-size: 10pt;
    background:red;
    border : thin dotted Black;
    }

    #divtag3 { visibility:hidden;
    position:absolute;
    top:300;
    left:10;
    height:75;
    width:300;
    font-size: 10pt;
    background:aqua;
    border : thin dotted Black;
    }
    .heading { font-size: 14pt;
    color: yellow;
    }
    // -->
    </style>
    <script type=text/javascript>

    // identify Netscape or MSIE
    var isIE = (document.all) ? true : false;
    var isNS = (document.layers) ? true : false;

    function toggleT( objName, swi ) {

    if ( isIE ) {
    ( swi == "s" ) ? eval("document.all." + objName + ".style.visibility='visible';") :
    eval("document.all." + objName + ".style.visibility='hidden';");
    }
    else {
    ( swi == "s" ) ? eval("document.layers['" + objName + "'].visibility='show';") :
    eval("document.layers['" + objName + "'].visibility='hide';");
    }
    }


    </script>
    </HEAD>

    <BODY BGCOLOR="#FFFFFF">

    <span id="controlSection">
    <form name="form0">
    Controls for the first set of controls.<br />
    Visible <input name="r1" type="radio" value="" onClick="toggleT('divtag1','s'); toggleT('divtag2','h'); toggleT('divtag3','h');"><br />
    Hidden <input name="r1" type="radio" value="" onClick="toggleT('divtag1','h')">
    <br />
    <br />
    Controls for the second set of controls.<br />
    Visible <input name="r2" type="radio" value="" onClick="toggleT('divtag2','s'); toggleT('divtag1','h'); toggleT('divtag3','h');"><br />
    Hidden <input name="r2" type="radio" value="" onClick="toggleT('divtag2','h')">
    <br />
    <br />
    Controls for the third set of controls.<br />
    Visible <input name="r3" type="radio" value="" onClick="toggleT('divtag3','s'); toggleT('divtag1','h'); toggleT('divtag2','h');"><br />
    Hidden <input name="r3" type="radio" value="" onClick="toggleT('divtag3','h')">
    </form>
    </span>

    <span id="divtag1">
    <form name="form1">
    This is initially visible<INPUT TYPE="text" NAME="textBox"><br />
    <INPUT TYPE="submit"><INPUT TYPE="reset">
    </form>
    </span>

    <span id="divtag2">
    <form name="form2">
    This is initially invisible<select name="selectBox" size="3">
    </select><br />
    <INPUT TYPE="submit"><INPUT TYPE="reset">
    </form>
    </span>

    <span id="divtag3">
    <form name="form3">
    This is initially invisible
    <textarea cols="25" rows="3" name="textArea">asdfasfafd</textarea><br />
    <INPUT TYPE="submit"><INPUT TYPE="reset">
    </form>
    </span>

    <span id="explainations">
    <span class="heading">Hiding and Show Form Objects.</span><br />

    For whatever reason, if you embed your form objects,<br />
    no matter what they are, into seperate forms, you are<br />
    then able to use style containers, defined to overlay one<br />
    another, to hide or show the various element sets as you see fit.<br />
    </span>

    </BODY>
    </HTML>
  4. #3
  5. No Profile Picture
    Senior Citizen
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2001
    Location
    leftcoast
    Posts
    2,019
    Rep Power
    16
    This may help...
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2000
    Location
    Kearns, Utah, USA
    Posts
    16
    Rep Power
    0

    thanks


    Thanks for your help guys! I have just decided to have it hide the combobox when the dropdown menu comes down, never even thought about it.

IMN logo majestic logo threadwatch logo seochat tools logo