467,114 Members | 1,220 Online
Bytes | Developer Community
Ask Question

Home New Posts Topics Members FAQ

home > topics > html / css > questions > ie7 z-index issue on second+ child.

Post your question to a community of 467,114 developers. It's quick & easy.

IE7 z-index Issue on second+ child.

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
  • viewed: 1629
Share:
3 Replies
drhowarddrfine
Expert 4TB
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
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+
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.

Similar topics
Child from a Child..
5 posts views Thread by VJ | last post: by
Upgrade issue - Second Request
1 post views Thread by NeedHelp@aol.com | last post: by
MDI child forms acting strange?
1 post views Thread by Brett Romero | last post: by
Mdi Child behavior
reply views Thread by =?Utf-8?B?anAybXNmdA==?= | last post: by
BYTES.COM © 2021
About Us
Advertise
Terms Of Use
Privacy Policy
Manage Cookies
Contact Us
Sitemap
HTML / CSS Answers Sitemap
HTML / CSS Insights Sitemap

Follow us! Get the Latest Bytes Updates
By using this site, you agree to our Privacy Policy and Terms of Use.