Sign In | Register Now About Bytes | Help | Site Map
Connecting Tech Pros Worldwide
Bytes > Forums - Questions and Answers > HTML / CSS Forum

ie z-index of child UL elements

Question posted by: pedalpete (Member) on March 26th, 2008 05:06 PM
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
pedalpete's Avatar
pedalpete
Member
90 Posts
March 28th, 2008
11:22 PM
#2

Re: ie z-index of child UL elements
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
  1. td {background-color: white;
  2.     padding: 3px;
  3.     width: 120px;
  4.     height: 30px;
  5.     overflow: visible;
  6.     border: 2px solid #999999;
  7. }
  8.  
  9.  
  10. .show, .prep{
  11.     background-repeat: repeat-y;
  12.     background-position: 50% 0%;
  13.     border: 1px solid #7F7F7F;
  14.     font-size: 9px;
  15.     font-weight: bold;
  16.     padding-top: 4px;
  17.     height: 18px;
  18.     overflow: visible;
  19.     text-align: center;
  20. }
  21.  
  22. ul {
  23.     display: block;
  24. margin-top: 3px;
  25. }
  26.  
  27. .addShow, .editShow {
  28.     display: none;
  29.     z-index: 90;
  30. }
  31.  
  32.  
  33.  
  34. .holdshows {
  35.     margin-top: 3px;
  36.     z-index: 1;
  37.     display: block;
  38.  
  39. }
  40. .show {
  41. background-image: url('../images/show.gif');
  42.     background-repeat: repeat-y;
  43.     background-color: #7BBA08;
  44. }
  45. .show span {
  46.     display: block;
  47.  
  48. }
  49. .prep {
  50.     background-image: url('../images/offReq.gif');
  51.     background-color: #F15258;
  52.     border: 1px solid #7F7F7F;
  53. }
  54. /* this is the menu for the show options:
  55.  * http://users.tpg.com.au/j_birch/plugins/superfish/superfish.commented.css
  56.  */
  57.  
  58. /*** ESSENTIAL STYLES ***/
  59. .showMenu, .showMenu * {
  60.     margin:0;
  61.     padding:0;
  62.     list-style:none;
  63. }
  64. .showMenu {
  65.     height: 10px;
  66. }
  67. .dropped{
  68.     position: absolute;
  69.     width:9.45em;
  70. }
  71. .showMenu li ul li,
  72. .showMenu a {
  73.     width: 100%;
  74.     display: block;
  75.     background-image: url('../images/dropBack.gif');
  76.     background-position: 50% 0%;
  77.     text-align: center;
  78.     cursor: pointer;
  79.     background-color: #666666;
  80.     width: 90px;
  81.     padding: 3px;
  82.     color: white;
  83.     font-weight: bold;
  84.     font-size: 10px;
  85.     position: relative;
  86.     top: 0px;
  87.     left: 0px;
  88.     margin-left: auto;
  89.     margin-right: auto;
  90.     border-bottom: 1px solid #CCCCCC;
  91.  
  92. }
  93.  
  94.  
  95. .showMenu a {
  96.     display:block;
  97. }
  98. .showMenu li:hover ul,
  99. ul.showMenu li.sfHover ul {
  100.     left:-1px;
  101.     top:12px;
  102. }
  103. .showMenu li:hover li ul,
  104. .showMenu li.sfHover li ul {
  105.     top:-999em;
  106.  
  107. }
  108. .showMenu li li:hover ul,
  109. ul.showMenu li li.sfHover ul {
  110.     left:9.45em;
  111.     top:-1px;
  112.  
  113. }
  114. .superfish li:hover ul,
  115. .superfish li li:hover ul {
  116.     top: -999em;
  117.  
  118. }
  119.  
  120.  
  121. .dropped a, .dropped li:hover, .dropped li.sfHover,
  122. .dropped a:focus, .dropped a:hover, .dropped a:active, .showMenu li li, .dropped .addshow {
  123.  
  124. }
  125. /*** ORIGINAL SKIN ***/
  126. .showMenu {
  127.     float:left;
  128.     margin-bottom:1.5em;
  129.  
  130. }
  131. .showMenu li:hover, .showMenu li.sfHover,
  132. .showMenu a:focus, .showMenu a:hover, .showMenu a:active {
  133.     color: #666666;
  134.     font-size: 14px;
  135.     z-index: 1;
  136. }
  137.  


Expand|Select|Wrap|Line Numbers
  1. <html>
  2. <head>
  3. <script type="text/javascript" src="scripts/jquery-1.2.3.js"></script>
  4.  
  5. <script type="text/javascript" src="scripts/jqueryForm.js"></script>
  6. <script type="text/javascript" src="scripts/inplace.js"></script>
  7. <script type="text/javascript" src="scripts/calculation.js"></script>
  8. <script type="text/javascript" src="scripts/suckerfish.js"></script>
  9.  
  10.  
  11. <link rel="stylesheet" type="text/css" href="css/menus.css" >
  12.  
  13. <script type="text/javascript">
  14.  
  15. $(document).ready(function(){
  16.     $("ul.showMenu").superfish();
  17. });
  18.  
  19. </script>
  20. </head>
  21. <body>
  22. <table>
  23.  
  24. <tr>
  25. <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>
  26.  
  27.         <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 
  28.     <ul class="dropped"><li class="addReq" id="uid=126&f=e&date=2008-03-27&cid=10&reqType=1">edit prep </li>
  29.         <li class="addReq" id="uid=126&f=d&date=2008-03-27&cid=10&reqType=1">delete prep</li>
  30.         <li class="addReq" id="date=2008-03-27&uid=126&cid=10&f=n">add prep</li></ul></li><ul></div></td>
  31. <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>
  32.  
  33.         <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 
  34.     <ul class="dropped"><li class="addReq" id="uid=126&f=e&date=2008-03-27&cid=10&reqType=1">edit prep </li>
  35.         <li class="addReq" id="uid=126&f=d&date=2008-03-27&cid=10&reqType=1">delete prep</li>
  36.         <li class="addReq" id="date=2008-03-27&uid=126&cid=10&f=n">add prep</li></ul></li><ul></div></td>
  37. </tr>
  38. <tr>
  39. <td id="date" class="2008-03-27-126" width="120px">
  40.     <div  class="holdshows" style="left: 35; width: 39.9;">
  41.         <ul class="showMenu"><li class="show"  style="position: relative; left: 35; width: 39.9;"> 7:30-3:00
  42.             <ul class="dropped">
  43.             <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>
  44.  
  45.         <li class="addshow" id="date=2008-03-27&uid=126&sid=51&f=n">add show</li></ul></ul></li></ul></div>
  46.  
  47.     <div  class="holdshows"> <ul class="showMenu"><li  class="prep" style=" position: relative; left: 5; width: 125.4;"> 1:00-11:00 
  48.     <span class="req">Off Request</span> <ul class="dropped">
  49.  
  50.         <li class="addReq" id="uid=126&f=e&date=2008-03-18&cid=10&reqType=1">edit request </li>
  51.         <li class="addReq" id="uid=126&f=d&date=2008-03-18&cid=10&reqType=1">delete request</li>
  52.         <li class="addReq" id="date=2008-03-18&uid=126&cid=10&f=n">add request</li></ul></li><ul></div>
  53.  
  54.         <div  class="holdshows" style="left: 20; width: 79.8;"> 
  55.             <ul class="showMenu"><li  class="prep" style="position: relative; left: 20; width: 79.8;"> 4:00-6:00 
  56.     <ul class="dropped"><li class="addReq" id="uid=126&f=e&date=2008-03-27&cid=10&reqType=1">edit prep </li>
  57.         <li class="addReq" id="uid=126&f=d&date=2008-03-27&cid=10&reqType=1">delete prep</li>
  58.         <li class="addReq" id="date=2008-03-27&uid=126&cid=10&f=n">add prep</li></ul></li><ul></div></td>
  59.  
  60. <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>
  61.  
  62.         <li class="addshow" id="date=2008-03-27&uid=126&sid=51&f=n">add show</li></ul></ul></li></ul></div>
  63. <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 
  64.     <ul class="dropped"><li class="addReq" id="uid=126&f=e&date=2008-03-27&cid=10&reqType=1">edit prep </li>
  65.         <li class="addReq" id="uid=126&f=d&date=2008-03-27&cid=10&reqType=1">delete prep</li>
  66.         <li class="addReq" id="date=2008-03-27&uid=126&cid=10&f=n">add prep</li></ul></li><ul></div></td>
  67. </tr>
  68. </table>
  69. </body>
  70. </html>
Reply
drhowarddrfine's Avatar
drhowarddrfine
Expert
4,422 Posts
March 29th, 2008
02:14 AM
#3

Re: ie z-index of child UL elements
In your original markup, if you had a negative z-index, IE struggles with that and I don't think it works at all.
Reply
Reply
Not the answer you were looking for? Post your question . . .
189,891 Experts ready to help you find a solution.
Sign up for a free account, or Login (if you're already a member).

Latest Articles: Read & Comment
Top HTML / CSS Forum Contributors
Quick Browse:
Communities / Archives
XML / CSS | HTML | Javascript | PHP | Perl | Visual Basic | Python | C++ / C | Java | .NET / C# / VB / XML / ASP.net | ASP
PostgreSQL | MS SQL | Oracle | IBM DB2 | MS Access | MySQL

About Bytes | Sitemap | Privacy Policy | Terms of Use
Copyright 1995-2008 Bytes.com. All rights Reserved