Hi, I'm fairly new to jQuery and not a terribly strong JavaScript guy. I was excited to style up my own Superfish (http://users.tpg.com.au/ j_birch/plugins/superfish/) navigation menu, and it even looked good in IE! But my current design requires a div with a position:relative below the navigation on a few pages, and this causes that div to show through my Superfish drop-down in Internet Explorer 6 and 7 (Firefox on both Linux and Windows looks great still).
If anyone could help me out, it would be most appreciated. I've spent hours already narrowing things down to find the cause of the issue and can reproduce it with position:relative or postion:absolute. I've also read a bit more on bgiframe, wondering if that could help, but it seems that's just for covering select form fields (which is doing it's job!). You can see a screen shot of the problem here: http://www.thekrugs.com/superfish-ie-issue/scr-superfish-ie-issue.png My test page to reproduce the problem is here: http://www.thekrugs.com/superfish-ie-issue/index.html And below is the page source of my test page... Many thanks in advance! Jamie <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http:// www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en"> <head> <title>Superfish test</title> <link rel="stylesheet" type="text/css" media="screen" href="superfish.css" /> <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script type="text/javascript" src="hoverIntent.js"></script> <script type="text/javascript" src="jquery.bgiframe.min.js"></script> <script type="text/javascript" src="superfish.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("ul.sf-menu").superfish().find('ul').bgIframe ({opacity:false}); }); </script> </head> <body> <ul class="sf-menu"> <li><a href="#">menu item</a> <ul> <li><a href="#">menu item</a></li> <li><a href="#">menu item</a></li> </ul> </li> <li><a href="#">menu item</a></li> </ul> <div style="clear:both;"></div> <div style="position:relative; border:1px solid red; margin:5px; padding:5px;"> Test </div> </body> </html>
