By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,625 Members | 1,604 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,625 IT Pros & Developers. It's quick & easy.

ie z-index of child UL elements

100+
P: 110
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
Share this Question
Share on Google+
2 Replies


100+
P: 110
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.  
  138.  
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>
  71.  
Mar 28 '08 #2

drhowarddrfine
Expert 5K+
P: 7,435
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

Post your reply

Sign in to post your reply or Sign up for a free account.