Results 1 to 3 of 3

Thread: Problems with AnyLink and IE6.0

  1. #1
    Join Date
    Feb 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Problems with AnyLink and IE6.0

    Hello Everyone,

    I have implemented the AnyLink CSS Drop Down Menu and all worked well until I added some <select> inputs that were positioned below where the Drop Down Menus show up.

    When I hover over the links to show the Drop Down Menus, the input from the <select> statement shows through the Drop Down Menu.

    This only seems to be a problem in IE6.0???

    I tried to adjust the "z-index", lower the index on the select and increasing the index on the Drop Down Menu. This did not work.

    Any assisted would be appreciated,
    Alan

    The code I have been testing is shown below:


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    
    
    div.float {
    float:left;
    }
    
    .anylinkcss{
    position:absolute;
    visibility: hidden;
    border:1px solid black;
    border-bottom-width: 0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size:medium;
    z-index: 999;
    background-color: lightyellow;
    width: 205px;
    margin-top:4px;
    }
    
    .anylinkcss a{
    color:black;
    width: 100%;
    display: block;
    text-indent: 3px;
    border-bottom: 1px solid black;
    padding: 1px 0;
    text-decoration: none;
    text-indent: 5px;
    }
    
    .anylinkcss a:hover{ /*hover background color*/
    background-color: #CFDDED; font-weight:bold; }
    
    #navBar {background-color: #CFDDED; list-style-type: none; float: left; display: block; text-align: center; width: 100%; padding: 0; margin: 0; border:1px solid #333; font-family: Arial, Helvetica, sans-serif; }
    #navBar li {float:left; padding:3px; border-right:2px solid black;}
    #navBar .navBarItem a {color:black; text-decoration:none;}
    #navBar .navBarItem a:hover { color: #FF3300; text-align: center; float: left; text-decoration: none; }
    
    #varBar {background-color: #CFDDED; list-style-type: none; display: block; text-align: center; width: 100%; padding: 0; margin: 0; border:1px solid #000; font-family: Arial, Helvetica, sans-serif; }
    #varBar li {float:left; padding:3px; vertical-align:middle;}
    #varBar .varBarDesc {color:black; }
    #varBar .varBarVal {color:black; border-right:2px solid black; }
    .varHeader {width:100%; padding-left: 3px; background-color:#6666FF; margin-right:0; border:1px solid black;font-size:130%; font-family:Arial, Helvetica, sans-serif};
    
    </style>
    <script type="text/javascript" src="anylink.js">
    
    /***********************************************
    * AnyLink CSS Menu script-  Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    </script>
    
    </head>
    
    <body style="padding: 0; margin:0;">
    	  <div class="float" ></div>
    	  <div class="float" style="margin-left: 50px; padding-top: 5px; color:#09C; vertical-align:middle; font-size:x-large; font-family: Arial, Helvetica, sans-serif; text-weight:bold;"><p>Any Link Testing!!!</p></div>
    
    <!-- Row - Menu Bar -->
    <!--1st anchor link and menu -->
    
    <ul id="navBar">
    	<li class="navBarItem"><a href="#1" onClick="return clickreturnvalue()" >Save</a></li>
    	<li class="navBarItem"><a href="#1" onClick="return clickreturnvalue()" >Refresh</a></li>
    	<li class="navBarItem"><a href="#1" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'anylinkmenu1')">Hello Functions</a></li>
    	<!--2nd anchor link and menu -->
    	<li class="navBarItem"><a href="#1" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, 'anylinkmenu2')">Do These Functions</a></li>
    	<li class="navBarItem"><a href="#1" onClick="return clickreturnvalue()" >Exit</a></li>
    </ul>
    
    <div class="varHeader"><span>Enter Filter Values</span></div>
    	<ul id="varBar" >
    		<li class="varBarDesc">Segment</li>
    		<li class="varBarVal" ><span><select name="myselect1" style="z-index:-1;"><option value="001" >option2</option></select></li>
    		<li class="varBarDesc">Version</li>
    		<li class="varBarVal"><select name="myselect2"><option value="001" selected="selected"><span>option3</span></option></select></li>
    	</ul>
    
    <!-- Drop Down Menu Definitions -->
    	<div id="anylinkmenu1" class="anylinkcss" >
    		<a href="#1" >Test this One </a>
    		<a href="#1" >Test this Two </a>
    		<a href="#1" >Test this Three</a>
    		<a href="#1" >Test this Four</a>
    		<a href="#1" >Test this Five</a>
    	</div>
    
    	<div id="anylinkmenu2" class="anylinkcss" >
    		<a href="#1" onclick="javascript:alert(document.URL);">URL</a>
    		<a href="#1">CSS Design</a>
    		<a href="http://www.cnn.com/">CNN</a>
    		<a href="http://www.msnbc.com">MSNBC</a>
    		<a href="http://www.google.com">Google</a>
    	</div>
    
    
    </body>
    </html>
    Last edited by tornadoatc; 02-06-2006 at 09:26 PM.

  2. #2
    Join Date
    Feb 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default This also happens when using Chrome Menus

    This must be a true CSS newby problem because I have just tested a similar code using the Chrome Drop Down Menus and it has the same problem in IE6.0?

    Does anyone know of a work-around for IE6.0?

    Thanks,
    Alan

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    It is a bug or feature in IE. The easiest method of dealing with it is to move the menu and/or the form element so that they cannot overlap.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

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