ie z-index of child UL elements

110 100+

Hey CSS masters,

I've been messing with this for a long time, but can't get it working in IE, and can't figure out how the ie 'fixes' would be used in this kind of situation.

You can view the page here
http://zifimusic.com/testing/broken-hovers.html

Everything works perfectly in firefox, and safari (now), but in IE, the dropdown hovers end up behind the horizontal bars.

It seems that defining a different z-index for the horizontal bars, or removing the 'position' from the css has no effect.

Any ideas on how I can accomplish this?

I am using jquery and the superfish menus for the dropdowns.

Any advice or suggestions would be fantastic.
Pete

Mar 26 '08 #1

Subscribe Post Reply

2211

pedalpete

110

100+

I finally got this sorted out.

completely unintuitive, but i had an element
.shiftMenu li:hover, etc (below), and adding z-index: 1; to this element solved the issue.

I'll leave the solution up for a few weeks in case anybody finds it useful.
The remainder of my code is here in case anybody wants it.

Here is my css, followed by my html

Expand|Select|Wrap|Line Numbers

 
td {background-color: white;

    padding: 3px;

    width: 120px;

    height: 30px;

    overflow: visible;

    border: 2px solid #999999;

}
 
.show, .prep{

    background-repeat: repeat-y;

    background-position: 50% 0%;

    border: 1px solid #7F7F7F;

    font-size: 9px;

    font-weight: bold;

    padding-top: 4px;

    height: 18px;

    overflow: visible;

    text-align: center;

}
 
ul {

    display: block;

margin-top: 3px;

}
 
.addShow, .editShow {

    display: none;

    z-index: 90;

}
 
.holdshows {

    margin-top: 3px;

    z-index: 1;

    display: block;
 
}

.show {

background-image: url('../images/show.gif');

    background-repeat: repeat-y;

    background-color: #7BBA08;

}

.show span {

    display: block;
 
}

.prep {

    background-image: url('../images/offReq.gif');

    background-color: #F15258;

    border: 1px solid #7F7F7F;

}

/* this is the menu for the show options:

 * http://users.tpg.com.au/j_birch/plugins/superfish/superfish.commented.css

 */
 
/*** ESSENTIAL STYLES ***/

.showMenu, .showMenu * {

    margin:0;

    padding:0;

    list-style:none;

}

.showMenu {

    height: 10px;

}

.dropped{

    position: absolute;

    width:9.45em;

}

.showMenu li ul li,

.showMenu a {

    width: 100%;

    display: block;

    background-image: url('../images/dropBack.gif');

    background-position: 50% 0%;

    text-align: center;

    cursor: pointer;

    background-color: #666666;

    width: 90px;

    padding: 3px;

    color: white;

    font-weight: bold;

    font-size: 10px;

    position: relative;

    top: 0px;

    left: 0px;

    margin-left: auto;

    margin-right: auto;

    border-bottom: 1px solid #CCCCCC;
 
}
 
.showMenu a {

    display:block;

}

.showMenu li:hover ul,

ul.showMenu li.sfHover ul {

    left:-1px;

    top:12px;

}

.showMenu li:hover li ul,

.showMenu li.sfHover li ul {

    top:-999em;
 
}

.showMenu li li:hover ul,

ul.showMenu li li.sfHover ul {

    left:9.45em;

    top:-1px;
 
}

.superfish li:hover ul,

.superfish li li:hover ul {

    top: -999em;
 
}
 
.dropped a, .dropped li:hover, .dropped li.sfHover,

.dropped a:focus, .dropped a:hover, .dropped a:active, .showMenu li li, .dropped .addshow {
 
}

/*** ORIGINAL SKIN ***/

.showMenu {

    float:left;

    margin-bottom:1.5em;
 
}

.showMenu li:hover, .showMenu li.sfHover,

.showMenu a:focus, .showMenu a:hover, .showMenu a:active {

    color: #666666;

    font-size: 14px;

    z-index: 1;

}

Expand|Select|Wrap|Line Numbers

 
<html>

<head>

<script type="text/javascript" src="scripts/jquery-1.2.3.js"></script>
 
<script type="text/javascript" src="scripts/jqueryForm.js"></script>

<script type="text/javascript" src="scripts/inplace.js"></script>

<script type="text/javascript" src="scripts/calculation.js"></script>

<script type="text/javascript" src="scripts/suckerfish.js"></script>
 
<link rel="stylesheet" type="text/css" href="css/menus.css" >
 
<script type="text/javascript">
 
$(document).ready(function(){

    $("ul.showMenu").superfish();

});
 
</script>

</head>

<body>

<table>
 
<tr>

<td id="date" class="2008-03-27-126" width="120px"><div  class="holdshows" style="poition: relative; left: 35; width: 39.9;"><ul class="showMenu"><li class="show"  style="position: relative; left: 35; width: 39.9;"> 7:30-3:00<ul class="dropped"><li class="s-show" id="gid=20&cid=10&uid=126&showid=406&uid=126&date=2008-03-27&f=s&u=reload">switch show</li><li class="editshow" id="uid=126&sid=51&showid=406&f=e&date=2008-03-27">edit </li><li class="editshow" id="uid=126&sid=51&showid=406&f=d&date=2008-03-27">delete</li>
 
        <li class="addshow" id="date=2008-03-27&uid=126&sid=51&f=n">add show</li></ul></ul></li></ul></div><div  class="holdshows" style="left: 20; width: 79.8;"> <ul class="showMenu"><li  class="prep"style="position: relative; left: 20; width: 79.8;"> 4:00-6:00 

    <ul class="dropped"><li class="addReq" id="uid=126&f=e&date=2008-03-27&cid=10&reqType=1">edit prep </li>

        <li class="addReq" id="uid=126&f=d&date=2008-03-27&cid=10&reqType=1">delete prep</li>

        <li class="addReq" id="date=2008-03-27&uid=126&cid=10&f=n">add prep</li></ul></li><ul></div></td>

<td id="date" class="2008-03-27-126" width="120px"><div  class="holdshows" style="left: 35; width: 39.9;"><ul class="showMenu"><li class="show"  style="position: relative; left: 35; width: 39.9;"> 7:30-3:00<ul class="dropped"><li class="s-show" id="gid=20&cid=10&uid=126&showid=406&uid=126&date=2008-03-27&f=s&u=reload">switch show</li><li class="editshow" id="uid=126&sid=51&showid=406&f=e&date=2008-03-27">edit </li><li class="editshow" id="uid=126&sid=51&showid=406&f=d&date=2008-03-27">delete</li>
 
        <li class="addshow" id="date=2008-03-27&uid=126&sid=51&f=n">add show</li></ul></ul></li></ul></div><div  class="holdshows" style="left: 20; width: 79.8;"> <ul class="showMenu"><li  class="prep"style="position: relative; left: 20; width: 79.8;"> 4:00-6:00 

    <ul class="dropped"><li class="addReq" id="uid=126&f=e&date=2008-03-27&cid=10&reqType=1">edit prep </li>

        <li class="addReq" id="uid=126&f=d&date=2008-03-27&cid=10&reqType=1">delete prep</li>

        <li class="addReq" id="date=2008-03-27&uid=126&cid=10&f=n">add prep</li></ul></li><ul></div></td>

</tr>

<tr>

<td id="date" class="2008-03-27-126" width="120px">

    <div  class="holdshows" style="left: 35; width: 39.9;">

        <ul class="showMenu"><li class="show"  style="position: relative; left: 35; width: 39.9;"> 7:30-3:00

            <ul class="dropped">

            <li class="s-show" id="gid=20&cid=10&uid=126&showid=406&uid=126&date=2008-03-27&f=s&u=reload">switch show</li><li class="editshow" id="uid=126&sid=51&showid=406&f=e&date=2008-03-27">edit </li><li class="editshow" id="uid=126&sid=51&showid=406&f=d&date=2008-03-27">delete</li>
 
        <li class="addshow" id="date=2008-03-27&uid=126&sid=51&f=n">add show</li></ul></ul></li></ul></div>
 
    <div  class="holdshows"> <ul class="showMenu"><li  class="prep" style=" position: relative; left: 5; width: 125.4;"> 1:00-11:00 

    <span class="req">Off Request</span> <ul class="dropped">
 
        <li class="addReq" id="uid=126&f=e&date=2008-03-18&cid=10&reqType=1">edit request </li>

        <li class="addReq" id="uid=126&f=d&date=2008-03-18&cid=10&reqType=1">delete request</li>

        <li class="addReq" id="date=2008-03-18&uid=126&cid=10&f=n">add request</li></ul></li><ul></div>
 
        <div  class="holdshows" style="left: 20; width: 79.8;"> 

            <ul class="showMenu"><li  class="prep" style="position: relative; left: 20; width: 79.8;"> 4:00-6:00 

    <ul class="dropped"><li class="addReq" id="uid=126&f=e&date=2008-03-27&cid=10&reqType=1">edit prep </li>

        <li class="addReq" id="uid=126&f=d&date=2008-03-27&cid=10&reqType=1">delete prep</li>

        <li class="addReq" id="date=2008-03-27&uid=126&cid=10&f=n">add prep</li></ul></li><ul></div></td>
 
<td id="date" class="2008-03-27-126" width="120px"><div  class="holdshows" style="left: 35; width: 39.9;"><ul class="showMenu"><li class="show"  style="position: relative; left: 35; width: 39.9;"> 7:30-3:00<ul class="dropped"><li class="s-show" id="gid=20&cid=10&uid=126&showid=406&uid=126&date=2008-03-27&f=s&u=reload">switch show</li><li class="editshow" id="uid=126&sid=51&showid=406&f=e&date=2008-03-27">edit </li><li class="editshow" id="uid=126&sid=51&showid=406&f=d&date=2008-03-27">delete</li>
 
        <li class="addshow" id="date=2008-03-27&uid=126&sid=51&f=n">add show</li></ul></ul></li></ul></div>

<div  class="holdshows" style="left: 20; width: 79.8;"> <ul class="showMenu"><li  class="prep"style="position: relative; left: 20; width: 79.8;"> 4:00-6:00 

    <ul class="dropped"><li class="addReq" id="uid=126&f=e&date=2008-03-27&cid=10&reqType=1">edit prep </li>

        <li class="addReq" id="uid=126&f=d&date=2008-03-27&cid=10&reqType=1">delete prep</li>

        <li class="addReq" id="date=2008-03-27&uid=126&cid=10&f=n">add prep</li></ul></li><ul></div></td>

</tr>

</table>

</body>

</html>

Mar 28 '08 #2

drhowarddrfine

7,435

Expert 4TB

In your original markup, if you had a negative z-index, IE struggles with that and I don't think it works at all.

Mar 29 '08 #3

by: Don Bate | last post by:

I'm having a problem with the "unique" feature of XML Schema. I'm relatively new to using this feature so it may be that I'm misunderstanding something. Let's assume that I have the following...

.NET Framework

DTD Question surrounding duplicate child elements

by: Doug Estep | last post by:

Below is a sample of my XML… <MetaData> <Table name="mytable"> <PrimaryKey name="pk"><Column name="mycolumn"/></PrimaryKey> </Table> </MetaData> <Sequencer> <Table name="mytable">

.NET Framework

Child Elements/Nesting

by: Bill C | last post by:

I'm new to this so... Is it possible to create a well formed schema with child elements or do I some how have to use xslt to nest elements within elements to produce my final xml result set. My...

.NET Framework

Trying to dynamically create child elements in an XML document

by: Thirsty Traveler | last post by:

How would I dynamcially create an XML document of the following form: <ReceiveTSSCallBack xmlns="http://LandAm.EAI.Mainframe.TSR"> <TSSCallBack...

C# / C Sharp

How to parse and reorder child elements for posting AJAX

by: done4who | last post by:

Heres my problem: my javacript code reads each child element e.g.: <video> <author>skateboard2</author><id>xqWBGvbvw7g</id><title>zach skating</title><length_seconds>100</length_seconds></video>...

Javascript

Child elements cant have the name

by: Leeor Chernov | last post by:

Hi , I need an article(Page URL) that shows that child elements on the same level cant have the same name(Validation is illegal...).... for example : <Parent> <item/> <item/> <item/>...

.NET Framework

Tweaking the style of child elements inline

by: alainfri | last post by:

Hi, It's interesting if it is possible to use CSS rules for styling child elements inline? What I mean is if there is a way to apply CSS rules like this: <ul style="li{ margin: 0; }"<!-- NOT...

HTML / CSS

xs:choice and child elements with minOccurs=0

by: Peter Larsen | last post by:

Is this really a valid schema design? <?xml version="1.0" encoding="UTF-8"?> <xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema" elementFormDefault="qualified"> <xs:element name="root">...

.NET Framework

How to transform XML data from child elements to attributes?

by: Philip Cooper | last post by:

I'm new to XSL and need to know how to transform some XML structured like this: <table> <contents> <DATA>Section 1</DATA> <DATA>Chapter 1</DATA> <DATA>Part...

XML

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

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++

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,...

General

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...

Windows Server

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

ie z-index of child UL elements

Similar topics