Pure CSS Menu Showing Behind Form Fields in IE

kwilliams · November 1st, 2007, 10:08 AM

I developed a pure CSS menu with the help of Eric Meyer's tutorial, and it works great. But in IE6 and IE7, the menu shows up *behind* the form fields below. I hope that there's a quick fix for this that I haven't been able to find. If you can help me out, that would be great. Thanks.

KWilliams

chroniclemaster1 · November 2nd, 2007, 10:12 PM

Have you tried setting a z-index?

Everything has a z-index of 1 and competes by order on the page for what displays in front of the other. You can manually set a z-index of two (or higher) and it should display in front of anything that does not have a higher z-index (or no z-index at all). That said, I've still seen some interesting problems. If it doesn't seem to work try wrapper divs and setting z-indexes of different containers for the menu element.

-------------------------

Whatever you can do or dream you can, begin it. Boldness has genius, power and magic in it. Begin it now.
-Johann von Goethe

When Two Hearts Race... Both Win.
-Dove Chocolate Wrapper

Chroniclemaster1, Founder of www.EarthChronicle.com
A Growing History of our Planet, by our Planet, for our Planet.

kwilliams · November 5th, 2007, 12:26 PM

Hello chroniclemaster1,

I've worked with the z-index property for a while with my stylesheet without success. What I tried was to create a class for select menus called "selectField" with the following CSS:

Code:

.selectField {
    z-index:-1;
    display:inline;
}

Then I used that class to wrap a select menu in div tags, like this:

Code:

<div class="selectField">
    <select name="formselect">
        <option>- Select an Option -</option>
        <option>Option 1</option>
        <option>Option 2</option>
        <option>Option 3</option>
    </select>
</div>

Then I made sure that the navlist had the following properties set:

Code:

#navlist {
    position:absolute;
    z-index:1;/* brings menu to front of content */
    width:auto;
    margin-left:10px;
    margin-top:-1px;
    font-size:1.0em;
}

The "#navlist - z-index:1;" works at keeping the navlist in front of all of the other page's elements *except* for the select menu, even with the z-index properties set. I also tried making the z-index properties ridiculous values like 5 and -20, but it didn't make a difference.

If you could let me know what I'm doing wrong, I'd appreciate it. Thanks.

KWilliams

chroniclemaster1 · November 16th, 2007, 04:36 AM

I think I may have something. I remembered that a professor of mine once tackled something like this. I finally was able to locate the file. We never figured out "why" it works, and I couldn't figure it out now. However, Flash, objects, and applets are supposed to be controlled by the OS and should NEVER appear behind anything else. However, this example does. You may be able to adapt it to your page.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--

#Layer1 {
display:block;
    position:absolute;
    top:0px;
    left:214px;
    width:100px;
    height:220px;
    padding:30px;
    margin:60px;
    z-index:1;
    border:solid 4px #000066;
    background-color: #99CC00;


}

#bannerframe{
display:block;
    position:absolute;
    top:80px;
    left:0px;
    width:800px;
    height:80px;
    padding:30px;
    margin:60px;
    z-index:0;
    border:solid 4px #000066;
    background-color: #99CC00;


}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_jumpMenu(targ,selObj,restore){ //v3.0
  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
  if (restore) selObj.selectedIndex=0;
}
//-->
</script>
</head>

<body style="text-align:center">
<div id="bannerframe">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="800" height="80" id="source" align="middle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="source.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#006600" /><embed src="source.swf" quality="high" bgcolor="#006600" width="800" height="80" name="source" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object></div>
<div id="Layer1">
  <form name="form1" method="post" action="">
    <input type="text" name="textfield">
    <select name="menu1" onChange="MM_jumpMenu('parent',this,0)">
      <option>Fried Foods</option>
      <option>Boiled Foods</option>
       <option>Fried Foods</option>
      <option>Boiled Foods</option>
       <option>Fried Foods</option>
      <option>Boiled Foods</option>
    </select>
  </form>
</div>

</body>
</html>

-------------------------

Whatever you can do or dream you can, begin it. Boldness has genius, power and magic in it. Begin it now.
-Johann von Goethe

When Two Hearts Race... Both Win.
-Dove Chocolate Wrapper

Chroniclemaster1, Founder of www.EarthChronicle.com
A Growing History of our Planet, by our Planet, for our Planet.

Imar · November 16th, 2007, 04:49 AM

Hi KWilliams,

The problem is that the drop down list is considered a "Windowed control" which is treated differently by the OS / the browser. I don't think that a z-index will ever fix the problem.

Search Google for "windowed control" and you'll find some interesting stuff like explanations and interesting work arounds (hiding the offending control(s) for example.

I thought this was fixed in IE 7 though?? http://blogs.msdn.com/ie/archive/2006/01/17/514076.aspx

HtH,

Imar
---------------------------------------
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Everyone is unique, except for me.
Author of ASP.NET 2.0 Instant Results and Beginning Dreamweaver MX / MX 2004
Want to be my colleague? Then check out this post.

kwilliams · November 16th, 2007, 12:44 PM

chroniclemaster1,

I copied and pasted your code and tested it out, but I didn't see how it could help me with showing a CSS menu above the select menu.

Imar,

I looked up "windowed controls", and tried out several pieces of code, but all I can see is that even though the iframe is showing up behind the CSS menu, it's also blocking out the select menu all-together.I want the select menu to show up on the page, just behind the CSS menu. Could you give me or forward me to a basic example of code that does this? I'd really appreciate it. Thanks.

KWilliams

Imar · November 16th, 2007, 01:04 PM

Maybe you misunderstood what I said or what you read.

AFAIK, you can't have the <select> appear behind the CSS menu. That's the whole issue. Because of the way the control is designed, it will *always* show up on top of other elements in the page.

Common work arounds are hiding the control at the right moment, so it doesn't "shine" through the CSS menu anymore.

Again, I thought this was fixed in IE7...

Imar
---------------------------------------
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Everyone is unique, except for me.
Author of ASP.NET 2.0 Instant Results and Beginning Dreamweaver MX / MX 2004
Want to be my colleague? Then check out this post.

kwilliams · November 16th, 2007, 01:13 PM

It is fixed in IE7, but since a lot of users still use IE6 for whatever reason, I have to create a workaround for them.

I thought I'd add a "for instance" to this post to show what I'm talking about. I found some code at http://www.webreference.com/programm...pt/form/2.html that works well. Here's a stripped down version of that code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>Form Elements Overlapping a Styled Layer - WebReference.com -</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<STYLE type=text/css>

.menuBlock {
    BORDER-RIGHT: black 2px solid; BORDER-TOP: black 2px solid; FONT-SIZE: 14px; Z-INDEX: 100; VISIBILITY: visible; BORDER-LEFT: black 2px solid; WIDTH: 165px; CURSOR: default; LINE-HEIGHT: 20px; BORDER-BOTTOM: black 2px solid; FONT-FAMILY: Verdana; POSITION: relative; TOP: 14px; BACKGROUND-COLOR: menu
}
#subMenus {
    BORDER-RIGHT: black 2px solid; PADDING-RIGHT: 2px; BORDER-TOP: black 2px solid; PADDING-LEFT: 2px; FONT-SIZE: 14px; Z-INDEX: 100; LEFT: 15px; VISIBILITY: hidden; BORDER-LEFT: black 2px solid; WIDTH: 171px; CURSOR: default; LINE-HEIGHT: 20px; BORDER-BOTTOM: black 2px solid; FONT-FAMILY: Verdana; POSITION: relative; TOP: 15px; BACKGROUND-COLOR: menu
}
.highLite {
    PADDING-RIGHT: 10px; PADDING-LEFT: 10px; COLOR: #ffffff; BACKGROUND-COLOR: gray
}
#lb_1 {
    LEFT: 10px; POSITION: absolute; TOP: 40px
}
#WDinclude {
    FONT-SIZE: 75%; FONT-FAMILY: verdana, arial, helvetica
}
.WDi {
    FONT-FAMILY: verdana, arial, helvetica
}
#WDinclude A:link {
    COLOR: blue
}
.WDi A:link {
    COLOR: blue
}
#WDinclude A:visited {
    COLOR: purple
}
.WDi A:visited {
    COLOR: purple
}
.WRy1 {
    BACKGROUND: #fc0
}
.WRy2 {
    BACKGROUND: #fff3ac
}
</STYLE>

<SCRIPT type=text/javascript>
<!--

var isActive = false;

function menuItem(url,text){
  this.url = url;
  this.text = text;
}

function showMenu(){
  isActive = true;
  document.getElementById("lb_1").style.visibility="hidden";
  document.getElementById("subMenus").style.visibility="visible";
}

function hideMenu(){
  isActive = false;
  setTimeout('hide()',100);
}

function hide(){
  if(!isActive){
    document.getElementById("subMenus").style.visibility = "hidden";
    document.getElementById("lb_1").style.visibility="visible";
  }
}

function openWin(url){
  window.open(url,"newWin");
}

function setStyle(menuItem){
  isActive = true;
  menuItem.style.backgroundColor = "Gray";
  menuItem.style.color = "#FFFFFF"
}

function setDefault(menuItem){
  isActive = false;
  menuItem.style.backgroundColor = "";
  menuItem.style.color = ""
  hideMenu();
}
//-->
</SCRIPT>
</head>
<body>
<BR>
<div id="main" style="WIDTH: 100px; POSITION: absolute"> 
    <div class="menuBlock" id="menuBlock" onmouseover="showMenu();" onmouseout="hideMenu();">CSS Menu</div>
    <div id="subMenus"> 
        <div id="_0" onmouseover="setStyle(this)" onclick="openWin('http://netscape.net');" onmouseout="setDefault(this)">Netscape</div>
        <div id="_1" onmouseover="setStyle(this)" onclick="openWin('http://mozilla.org');" onmouseout="setDefault(this)">Mozilla</div>
        <div id="_2" onmouseover="setStyle(this)" onclick="openWin('http://apache.org');" onmouseout="setDefault(this)">Apache</div>
        <div id="_3" onmouseover="setStyle(this)" onclick="openWin('http://w3c.org');" onmouseout="setDefault(this)">W3C</div>
    </div>
    <FORM id=form1 action="">
    <SELECT id=lb_1 name=lb_1>
        <OPTION value=-1 selected>Select one</OPTION>
        <OPTION value=1>OneOneOneOneOneOneOneOneOneOneOneOneOneOneOneOneOneOneOneOneOneOneOneOneOneOneOneOneOne</OPTION>
        <OPTION value=2>Two</OPTION>
        <OPTION value=3>Three</OPTION>
    </SELECT>
    </FORM>
</div>
</BODY>
</HTML>

When the select menu's width is longer than the CSS menu and the select menu completely disappears from the page, it looks quite strange to the user.

So is there any way to use this method to only block part of the select menu? I don't think so, but I thought I'd ask. If not, are there any other workarounds?

KWilliams

kwilliams · November 16th, 2007, 03:41 PM

Hallelujah! I've found an answer by looking at one of the sources of my CSS menu...suckerfish. And it works great.

Here's an article on how to do exactly what I needed: http://tanny.ica.com/ICA/TKO/tkoblog...-in-ie-part-ii

...and here's an example page that they created to show how it works: http://tanny.ica.com/ICA/TKO/test.ns...examplefix.htm

This solution uses the iframe method mentioned previously in this post, while allowing only part of the select menu to be hidden. Hopefully this will help other developers in the future. Thanks for all of your help.

KWilliams

Imar · November 16th, 2007, 07:46 PM

Nice. Thanks for posting a follow up....

Imar
---------------------------------------
Imar Spaanjaars
http://Imar.Spaanjaars.Com
Everyone is unique, except for me.
Author of ASP.NET 2.0 Instant Results and Beginning Dreamweaver MX / MX 2004
Want to be my colleague? Then check out this post.