ie z-index of child UL elements

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • pedalpete
    New Member
    • Oct 2007
    • 109
    #1

    ie z-index of child UL elements

    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
    Tags: None
    • pedalpete
      New Member
      • Oct 2007
      • 109
      #2
      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
      Code:
      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;
}
      Code:
      <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>

        Comment

        • drhowarddrfine
          Recognized Expert Expert
          • Sep 2006
          • 7434
          #3
          In your original markup, if you had a negative z-index, IE struggles with that and I don't think it works at all.

            Comment

            Previous template Next
            Working...