473,322 Members | 1,287 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,322 software developers and data experts.

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
3 1718
drhowarddrfine
7,435 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
pedalpete
110 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

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

Similar topics

12
by: Anna | last post by:
Hi all, I posted the same question this afternoon but my message isn't showing up, so I thought I'd give it another try.... in case you should see it later I apologize for posting the same...
2
by: SHAWN DEB ECKLEY | last post by:
Here is my situation... i have a parent window/ main app and i call a child form (type 1). the child form(type 1) gets information from a database. the user makes some choices and then some data...
5
by: VJ | last post by:
Has anybody had trouble invoking a Child from (form2) another Child (form1) of a MDI form?.. I am seeing strange behaviour...,(including this one.. see my earlier thread "MDI form Strange...
1
by: NeedHelp | last post by:
I am upgrade a VB6 Program (ok no wise cracks) and I get 100's of "Event may fire when form is initialized" This is despite using the "Private IsInitializing As Boolean" suggested in then...
0
by: mkoirala | last post by:
I am doing a project in .NET. I have three forms say A,B,C. Form A is a mdicontainer. Form C is the modal dialog form and opens on pressing a button in form B.Now I run the application and open form...
1
by: Brett Romero | last post by:
I'm using .NET 2.0. I have an MDI app. When I create the first child form, it appears in the upper left part of the MDI parent. The MDI parent is larger than the child. I have the child set to...
4
by: iporter | last post by:
I wonder if anyone can clear up an OOP issue for me, specifically, how to have multiple child objects of a parent object. Consider the code below: var parentObj={ childCount: 0, childObj: {...
4
by: Buddha | last post by:
Hello, I posted this on two forums, without too much help .. and I am kinda stuck in this. I need to refresh the parent page from the second child window which is opened by the first child and...
0
by: =?Utf-8?B?anAybXNmdA==?= | last post by:
In my Mdi Application, I load a default child form at startup using WindowState = Maximized. If I open another child form, it is also Maximized. When the child form maximizes, it looks like all...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.