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

1 New Member

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 Reply

2112

tharden3

916

Contributor

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

Contributor

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

912

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 latest versions of mozilla and opera, too). The problem is a black line appearing over the second menu (the one with the <info/games/download/links/forum> options) that doesn't belong there (as you can see in the first menu).

HTML / CSS

1620

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 context, and used absolute positioning to place my menu at the bottom of the header. In Mozilla this approach works perfectly, but IE ignores the positioning context set by the header and places the menu at the bottom of the screen. You can see the page...

HTML / CSS

1784

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 just fine into opera or netscape but into IE6 if the menu have to appears on a zone that cover a dropdown list (a simple html <select> tag ) the menu appears behind the dropdown and not in front of it. Is there a solution?

Javascript

1253

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) could be used to realize something that? Which SDK is needed or are the classes already there? To the point: What's the correct tactic to develop that? Regards,

C# / C Sharp

8395

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 the A cell (which appears to have been expanded to fill the LI container it is in). In FF 1.0.5.2 and Opera 9 things work as expected. How might the CSS be changed to ensure (in IE) the mouse rolling over

HTML / CSS

1788

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. I have implemented csshover.htc in the manner I believe is correct. In IE6, the menu displays on two lines instead of a single line and the drop-down (Calendar) does not work (Calendar menu item is not a 'link'). Any clue where the problem...

HTML / CSS

1611

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 serious problem.And in my project we should use IE6 compulsory.When an menu encounters a select box,the part of menu over the select box is cut and select box is appearing instead of menu. 2.When i use html frames my menu is not rolled over next...

HTML / CSS

1417

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 IE7. Keeping my fingers crossed for now! What I need the menu is to look like is the menu on this page (with all the same hover background colors, margins and text colors): http://www.gseis.ucla.edu/~edd/www/_saba/index.html The page I need to...

HTML / CSS

5852

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 vertically instead. And this only happens when I don't give the LI in the menu list and fixed width, which I don't want because if I have a fixed width the menu list get's too long due to some words being longer than others and then it doesn't fit on the...

HTML / CSS

9734

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

9607

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...

Windows Server

10652

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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

7673

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

6895

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

5700

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

4346

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

3874

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

3026

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General