By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,648 Members | 1,198 Online
Bytes IT Community

Home Questions Articles Browse Topics Latest Top Members FAQ

home > topics > html / css > questions > ie7 z-index issue on second+ child.
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,648 IT Pros & Developers. It's quick & easy.

IE7 z-index Issue on second+ child.

P: 2
Hello,

I am working on a site that uses CSS pop out menus. I am having an issue with IE7 where the first menu item shows over all other content but then everything below it goes under. It works fin in FF... After searching the net i really have yet to understand how to fix this IE bug. Any info that isn't 100% confusing would be great! :) a good example of the issue is here:

http://www.groundupfilms.com/distractions.html

Thanks in advance!
Mar 12 '08 #1
Share this Question
Share on Google+
3 Replies
drhowarddrfine
Expert 5K+
P: 7,435
I don't have my Windows box on so I can't look but are you meaning an element is popping up underneath another element. iow, the other element covers up the popup one? This is a known IE bug where fixing it requires adding 'position:relative' to one of the elements but I never remember which one.
Mar 12 '08 #2
P: 2
Yes basically... But its weird because the first item in the pop out actually shows over other elements... here is a screen shot from IE7:

http://www.groundupfilms.com/iebug.jpg

I spent hours last night trying different z-index's and setting different things to "position:relative" and just can't seem to figure out what it is! below is the css for the menu itself.. Thanks!

Expand|Select|Wrap|Line Numbers
  1. #menuleft a {
  2.     display:block;
  3.     width:225px;
  4.     border:none;
  5. }
  6. #menuleft a {
  7.     text-decoration:none;
  8.     padding:0;
  9.     margin:0;
  10.     font-size: 12px;
  11. }
  12. #menuleft a:link, #menuleft a:visited {
  13.     color:#000000;
  14.     width:225px;
  15. }
  16. #menuleft a:hover {
  17.     color:#FFF;
  18.     background:transparent url(/assets/templates/groundup/images/submainbg.gif) no-repeat;
  19. }
  20. #menuleft a:active {
  21.     color:#000;
  22.     background:transparent url(/nav/images/tile-blue-on-3.gif) no-repeat;
  23. }
  24. #menuleft form {
  25.     margin:0;
  26. }
  27. #menuleft li {
  28.     margin:0;
  29.     padding:0;
  30.     list-style-type:none;
  31. }
  32. #menuleft ul, #menuleft ul ul, #menuleft ul ul ul {
  33.     margin:0;
  34.     padding:0;
  35.     list-style-image:none;
  36.     width:225px;
  37. }
  38. #menuleft i {
  39.     visibility:hidden;
  40. }
  41. /* Begin CSS Popout Menus at Left */
  42. #menuleft ul li {
  43.     position:relative;
  44. }
  45. #menuleft li ul {
  46.     position:absolute;
  47.     left:200px;
  48.     top:0;
  49.     display:none;
  50.     z-index: 100;
  51. }
  52. /* Fix IE. Hide from IE Mac \*/
  53.     * html #menuleft ul li {
  54.     float:left;
  55.     height:1%;
  56. }
  57. * html #menuleft ul li a {
  58.     height:1%;
  59. }
  60. /* End */
  61.  
  62. div#menuleft ul ul, div#menuleft ul ul ul, div#menuleft ul li:hover ul ul, div#menuleft ul li:hover ul ul ul {
  63.     display:none;
  64. }
  65. div#menuleft ul li:hover ul, div#menuleft ul ul li:hover ul, div#menuleft ul ul ul li:hover ul {
  66.     display:block;
  67. }
  68. #menuleft a.home {
  69.     color:#3f0909;
  70.     background: transparent url(/assets/templates/groundup/images/homeOff.jpg) no-repeat;
  71.     width:225px;
  72.     height: 45px;
  73. }
  74. #menuleft a.home:hover {
  75.     color:#3f0909;
  76.     background: transparent url(/assets/templates/groundup/images/home.jpg) no-repeat;
  77.     width:225px;
  78.     height: 45px;
  79. }
  80. div# ul li a.projects,  ul li a.projects:hover {
  81. z-index:1;
  82. }
  83. #menuleft a.projects {
  84.     color:#3f0909;
  85.     background: transparent url(/assets/templates/groundup/images/projectsOff.jpg) no-repeat;
  86.     width:225px;
  87.     height: 41px;
  88. }
  89. #menuleft a.projects:hover {
  90.     color:#3f0909;
  91.     background: transparent url(/assets/templates/groundup/images/projects.jpg) no-repeat;
  92.     width:225px;
  93.     height: 41px;
  94. }
  95. #menuleft a.about {
  96.     color:#3f0909;
  97.     background: transparent url(/assets/templates/groundup/images/aboutOff.jpg) no-repeat;
  98.     width:225px;
  99.     height: 39px;
  100.     z-index:1;
  101. }
  102. #menuleft a.about:hover {
  103.     color:#3f0909;
  104.     background: transparent url(/assets/templates/groundup/images/about.jpg) no-repeat;
  105.     width:225px;
  106.     height: 39px;
  107. }
  108. #menuleft a.distractions {
  109.     color:#3f0909;
  110.     background: transparent url(/assets/templates/groundup/images/distractionsOff.jpg) no-repeat;
  111.     width:225px;
  112.     height: 40px;
  113. }
  114. #menuleft a.distractions:hover {
  115.     color:#3f0909;
  116.     background: transparent url(/assets/templates/groundup/images/distractions.jpg) no-repeat;
  117.     width:225px;
  118.     height: 40px;
  119. }
  120. #menuleft a.links {
  121.     color:#3f0909;
  122.     background: transparent url(/assets/templates/groundup/images/linksOff.jpg) no-repeat;
  123.     width:225px;
  124.     height: 40px;
  125. }
  126. #menuleft a.links:hover {
  127.     color:#3f0909;
  128.     background: transparent url(/assets/templates/groundup/images/links.jpg) no-repeat;
  129.     width:225px;
  130.     height: 40px;
  131. }
  132. #menuleft a.contact {
  133.     color:#3f0909;
  134.     background: transparent url(/assets/templates/groundup/images/contactOff.jpg) no-repeat;
  135.     width:225px;
  136.     height: 31px;
  137. }
  138. #menuleft a.contact:hover {
  139.     color:#3f0909;
  140.     background: transparent url(/assets/templates/groundup/images/contact.jpg) no-repeat;
  141.     width:225px;
  142.     height: 31px;
  143. }
  144. #menuleft a.submain {
  145.     color: #3f0a0b;
  146.     width: 196px;
  147.     height: 28px;
  148.     background:transparent url(/assets/templates/groundup/images/submainbg.gif) no-repeat;
  149.     padding: 13px 0px 0px 15px;
  150.     font-size: 11px;
  151.     font-weight: bold;
  152.     z-index: 1000 !important;
  153.     position:relative;
  154. }
  155. #menuleft a.submain:hover {
  156.     left: 5px;
  157.     color: #61090b;
  158.     width: 196px;
  159.     height: 28px;
  160.     background:transparent url(/assets/templates/groundup/images/submainbg.gif) no-repeat;
  161.     padding: 13px 0px 0px 15px;
  162.     font-size: 11px;
  163.     font-weight: bold;
  164.     z-index: 1000 !important;
  165.     position:relative;
  166. }
  167.  
Mar 12 '08 #3
100+
P: 110
Looks like you got this fixed.

Not sure if this is the fix you used, but I went through your code and found
Expand|Select|Wrap|Line Numbers
  1. * html .holdshows ul li ul li {
  2.     float:left;
  3.     height:1%;
  4.     z-index: 1000;
  5. }
  6. * html .holdshows ul li ul li a {
  7.     height:1%;
  8.     z-index: 1000;
  9. }
  10.  
  11.  
Was that your fix?
i'm dealing with a similar issue, but your fix didn't work for me (if that is it).
http://zifimusic.com/test/broken-hovers.html

Please let us know how you got this working.

Thanks
Pete
Mar 28 '08 #4

Post your reply

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

Question stats

  • viewed: 1581
  • replies: 3
  • date asked: Mar 12 '08
BYTES.COM © 2019 About Bytes | Advertise on Bytes | Privacy Policy | Manage Cookies
Sitemap | HTML / CSS Answers Sitemap | HTML / CSS Insights Sitemap

Follow us to get the Latest Bytes Updates