Problems with AnyLink and IE6.0

**tornadoatc** · 02-06-2006, 08:53 PM

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>

**tornadoatc** · 02-06-2006, 09:23 PM

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

**jscheuer1** · 02-06-2006, 09:56 PM

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.

Thread: Problems with AnyLink and IE6.0

Thread Tools

Search Thread

Problems with AnyLink and IE6.0

This also happens when using Chrome Menus

Bookmarks

Bookmarks

Posting Permissions