CSS dropmenu appears behind div with curvycorners uisng IE 7

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Create a CCS styled menu with unordered lists.
2. Apply CurvyCorners to a div below the menu.
3. View the page in IE 7

What is the expected output? What do you see instead?
The drop menu should hover above other elements on the page, but instead
the menu drops behind the div with CurvyCorners

What version of the product are you using? On what operating system?
Using CurvyCorners 2.0.4. Windows Vista.

Please provide any additional information below.
Playing with the z-index for the drop menu seems to have no effect.
Applying a negative z-index to the div helps with the menu appearing on
top, but it disables all forms and links.

Original issue reported on code.google.com by char...@gmail.com on 3 Nov 2009 at 7:04

[GoogleCodeExporter]

I was able to resolve this issue by applying z-index to every div, ul, and li
associated with my drop menu.

Original comment by char...@gmail.com on 4 Nov 2009 at 3:12

[GoogleCodeExporter]

Please test with latest version of the script and report any differences.

If the problem persists, please post the URL of a page demonstrating the 
problem, 
linked to the latest source version of the script.

Original comment by c.1%smit...@gtempaccount.com on 2 Jan 2010 at 4:43

• Changed state: Incomplete

[GoogleCodeExporter]

Any solutions for this problem yet? I am using 2.0.4 and having the same 
problem,
only occurs when loading curvy corners.   

Original comment by Sjib...@gmail.com on 19 Jan 2010 at 2:24

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Still waiting for a response to my previous request for fuller information, 
without 
which I can do nothing.

Original comment by c...@realidcheck.com on 21 Jan 2010 at 3:43

[GoogleCodeExporter]

[deleted comment]

[GoogleCodeExporter]

Here is an example of this bug: http://www.espressokopen.nl/

If you'll put mouse over "Nespresso apparaten" (second menu item) you'll see 
menu
under curvycornered div. Or try mouseover last menu item - which is more vivid
example :))

PS Thank you for the great library.

Original comment by zappa...@gmail.com on 23 Feb 2010 at 10:15

[GoogleCodeExporter]

Thanks for the example. I can see the problem clearly. It is caused by a bug in 
IE 
whereby absolutely-positioned boxes (actually as you know these are positioned 
relative to the first ancestor element that is absolutely or relatively 
positioned) 
don't obey z-order correctly if they don't share a common absolutely/relatively 
positioned ancestor. See

http://richa.avasthi.name/blogs/tepumpkin/2008/01/11/ie7-lessons-learned/

and links for a fuller explanation and possible workaround. As stated in that 
article, this bug was fixed in IE8.

Original comment by c.1%smit...@gtempaccount.com on 1 Mar 2010 at 3:32

• Changed state: Invalid

[GoogleCodeExporter]

Thank you for your time and help. Solution from proposed blog post helped 
(tested
with jQuery version of workaround posted there).

Original comment by zappa...@gmail.com on 1 Mar 2010 at 9:31

[GoogleCodeExporter]

Hi all

Thanks for all the advice, but for me none of it worked :<

What I had to do was place the popup that was being hidden by curvycornered 
divs at the very bottom of the html file, then position it absolutely back into 
the right place. This will of course only work if the content above the popup 
is static...

I'm posting this here as much for me to remember as for passing on information 
to anyone else :>

Original comment by kenthump...@gmail.com on 1 Jul 2010 at 11:50

[GoogleCodeExporter]

Had the same issue. Setting the z-index in CSS for all elements in the menu 
worked for me:

.menu * {
  z-index: 99
}

Original comment by tcha...@gmail.com on 3 Sep 2010 at 6:54

[GoogleCodeExporter]

Good example!

<script type="text/JavaScript">
  $(function(){   
  settings = {
          tl: { radius: 8 },
          tr: { radius: 8 },
          bl: { radius: 8 },
          br: { radius: 8 },
          antiAlias: true,
          autoPad: true,
          validTags: ["div"]
      }
  $('.rounded').corner(settings);  
});
  $(function() {
    var zIndexNumber = 1000;
    $('#nav').each(function() {
        $(this).css('zIndex', zIndexNumber);
        zIndexNumber -= 10;
    });
});
</script>

Original comment by nvastu...@gmail.com on 14 Sep 2010 at 4:56