z-index issue on css menu flyout (in IE6)

Hi all,

I am using IE6, and have a problem with css (nearly) only flyout menus. In firefox, it works fine, but in IE6 with the csshover.htc behaviour, I am finding that the 2nd level menu items are being hidden behind other menu items. I have set the 2nd level items to have a high z-index to no avail. Code below:

Expand|Select|Wrap|Line Numbers

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html>

  <head>

    <style>

      .menu ul {

        width: 8em;

        background; #edc#

        border-top: 1px solid #000;
 
         padding:0; margin:0; list-style-type: none; float:left;

      }
 
      .menu li {

        list-style: none;

        position: relative;

        border-left: 1px solid #000;

        border-right: 1px solid #000;

        border-bottom: 1px solid #000;

        vertical-align: bottom;

      }
 
      .menu ul a {

        display:block;

        padding: 5px 1px;

        vertical-align: bottom;

      }
 
      .menu ul ul {

        background: #fed;

        position: absolute;

        left: -300px;

      }
 
      .menu ul li:hover ul {

        left:7em;

        top: 4px;
 
        z-index: 100;

        font-size:9px; display:block; position:absolute; top:0; left:145px; width:145px;

      }

    .menu {  margin:0; margin:0px 0; font-size: 9px; }

    .menu ul li a, .menu ul li a:visited { font-size:9px; display:block; text-decoration:underline; color:#00f; width:144px; text-align:center; border:1px solid #fff; border-width:1px 1px 0 0; background:#c9c9a7; border:outset 2px #ddd; }

    .menu ul li {padding:0; clear: both; float:left; margin-right:1px; }

    .menu ul li ul { display: none; }

    /* Non IE attributes */

    .menu ul li:hover a { color:#00f; background:#b3ab79; }

    .menu ul li:hover ul li a:hover { background:#c9c9a7; color:#00f; }
 
    </style>

<!-- Taken from http://www.positioniseverything.net/ -->

<!--[if IE]>

  <style type="text/css">

    body {behavior: url(csshover.htc);}

    ul a, ul, li {height: 1%;} /* Holly hack fix for IE bugs */

    li {

      margin-left: -16px;

      mar\gin-left: 0;

    } /* special rules to correct older IE/win bullet zone problems */

  </style>
 
  <noscript>

    <style type="text/css">

      ul ul {position: static;}

    </style>

  </noscript>
 
<![endif]-->
 
<style>

  #Col1 {

    position:absolute;

    width: 200px;

    left: 100px;

  }

  #Col2 {

    position:absolute;

    width: 200px;

    left: 250px;

  }

</style>
 
  </head>
 
  <body>

    <div class='menu'>

      <div id='Col1'>

        <ul>

          <li style='z-index:10;' > <a href='#'>One</a>

            <ul>

              <li style='z-index:7;'><a href='#'>Here</a></li>

              <li><a href='#'>There</a></li>

              <li><a href='#'>Everywhere</a></li>

            </ul>

          </li>

          <li style='z-index:9;' > <a href='#'>Two</a>

            <ul>

              <li><a href='#'>Here</a></li>

              <li><a href='#'>There</a></li>

              <li><a href='#'>Everywhere</a></li>

            </ul>

        </li>

      </ul>

    </div> <!-- eo 'Col1' -->

    <div id='Col2'>

      <ul>

        <li style='z-index:8;' > <a href='#'>Three</a>

          <ul>

            <li><a href='#'>Here</a></li>

            <li><a href='#'>There</a></li>

            <li><a href='#'>Everywhere</a></li>

          </ul>

        </li>

        <li style='z-index:7;' > <a href='#'>Four</a>

          <ul>

            <li><a href='#'>Here</a></li>

            <li><a href='#'>There</a></li>

            <li><a href='#'>Everywhere</a></li>

          </ul>

        </li>

      </ul>

    </div> <!-- eo 'Col2' -->

  </div> <!-- eo 'menu' -->

</body>

</html>

I have read that IE6 has z-index issues, but I am at a loss as to how to fix.

TIA

Jul 25 '08 #1

Subscribe Post Reply

2094

tharden3

916

512MB

Now I'm not sure... and Google could help you with this... but there is probably a function of 'display' that you could use to make it show itself on top. Again, IE always has problems.... I would google some things you can do with display.

P.S.
I can't quite understand why that z-indexing won't work like it should.

Jul 25 '08 #2

tharden3

916

512MB

Now I'm not sure... and Google could help you with this... but there is probably a function of 'display' that you could use to make it show itself on top. Again, IE always has problems.... I would google some things you can do with display.

P.S.
I can't quite understand why that z-indexing won't work like it should.

Scratch what I said, I looked up all the possible 'display' features. None would be helpful to your problem. I though that maybe because you can make objects disappear with "display: none;" that you might be able to make them appear exclusively on top. But you can't.... I'll keep looking into your problem.

Jul 25 '08 #3

Similar topics

black line over menu in IE6

by: Abs | last post by:

Hi! I'm building a website for some friends in a independent game developing group. The site is almost done but I've come across a bug that only happens in IE6 (I've tested the site with the...

HTML / CSS

Placement of menu in IE6

by: Jeroen Sangers | last post by:

Hello, I am having a problem in IE with my menu tabs. I want them to appear alligned on the bottom of my header, and therefore I have positioned my header relatively to set a positioning...

HTML / CSS

Javascript menu into IE6

by: Philippe | last post by:

Hello, I'm a newbee into the javascript world and I'm trying to use the opencube solution to display a complex menu. As I can see, the opencube solution is javascript 1.2. My menu is working...

Javascript

Add an Menu to IE6

by: Mario Schymura | last post by:

Hi everybody. I want to add a new Menu to IE6. I'll use C# and the .NET Framework 1.1 to develop it, but my problem is leck of knowledge concerning IE6 programming. Which Object Model (classes)...

C# / C Sharp

Vertical CSS menu - in IE6 hover does not trigger except over text

by: Richard | last post by:

A menu page has a set of A tages in a UL The menu (in IE) will only get the hover visualization if the mouse rolls over underlined text. I want it to happen if the rollover occurs anywhere in...

HTML / CSS

Horizontal drop-down menu in IE6

by: Jack Gray | last post by:

Hi everyone, I am using a nested list for a simple drop-down menu. All CSS and XHTML validate. The menu is displayed properly in 7 different newer browsers including IE7, Firefox, Opera & Safari....

HTML / CSS

problem in Dynamic css menu in IE6

by: raghuvarmabh | last post by:

I am generating dynamic menu using css.the menus are loaded from data base at start up.But i am having some serious problems. 1.The menu is unable to roll over select boxes in IE6.This is very...

HTML / CSS

help with css menu in ie6 and mac browsers

by: elasticgurl | last post by:

I'm wondering if anyone has access to ie6 and can view my css and see if they can help me . As it stands, my menu looks different in both mac browsers and IE6. At this point, I haven't tested in...

HTML / CSS

Problem with horizonal dropdown css menu in IE6...

by: jerry101 | last post by:

Hi, I've been working on a horizontal drop down menu today, and I can get it to display perfectly in everything bar IE6. Basically instead of them lining up horizontally, they line up...

HTML / CSS

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General