Help with bgiframe.js in IE6

JavaScript
1

Hi,

I’m trying to use bgiframe to allow my css menus to stay on top of all other content in IE6. z-index works for every other browser.

I’m using suckerfish to allow the popup menu to appear in IE6. This is working correctly.

The problem is I cant for the life in me get bgiframe to work. The menu always goes behind my other positioned content.

The site I’m working on is very large, so I’ve thrown together a rough ‘n’ ready example to illustrate the problem if someone wouldn’t mind having a look?
You’ll need IE6 or just install IETester which has all the IE rendering engines.

I’ve attached all the files you’ll need, but if you want a quick look at the code, here it is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.bgiframe.js"></script>
<script type="text/javascript"> 
$('#nav li:hover ul').bgiframe(); 
</script>
<style>
#topNavLinksContainer{
position:absolute;
top:0;
margin-bottom:5px;
left:0px;
}

#nav, #nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
	list-style-image:none;
}

#nav a {
	display: block;
	padding:4px;
	margin-left:3px;
	margin-right:3px;
	color:#000000;
}

#nav li {
	float: left;
	list-style: none;
	list-style-image:none;
	border-right:1px solid #000000;
}

#nav li ul {
	position: absolute;
	background: #ffffff;
	width: 10em;
	left: -999em;
	padding:4px 6px 2px 4px;
}
#nav li ul li{
width:100%;
}

#nav li:hover ul, #nav li.sfhover ul {
	left: 52px;z-index:1000;
}

#nav li a:hover{background-color:#dddddd;color: #ffffff;text-decoration:none;}
#nav li ul li {border:1px solid #000000;}
#nav li li a, #nav li li a:visited {margin:0;}

/*TOP NAVIGATION - END*/
#carsform{
position:relative;
margin:0px 0px 20px 0px;
padding:0px;
border:1px solid #666666;
width:674px;
height:193px;
z-index:1;
background-color:#ccc;
}

</style>
</head>

<body>
<div id="topNavLinksContainer">
<ul id="nav">
	<li><a href="#">Link 1</a></li>
	<li><a href="#">Link 2</a>
	<ul>
		<li><a href="#">List 1</a></li>
		<li><a href="#">List 2</a></li>
		<li><a href="#">List 3</a></li>
		<li><a href="#">List 4</a></li>
		<li><a href="#">List 5</a></li>
	</ul>
	</li>
	<li><a href="#">Link 3</a></li>
	<li><a href="#">Link 4</a></li>
</ul>
</div><br />
<br />

<div id="carsform">
<form action="">
<select name="cars" style="width:200px">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select><br />
</div>
</body>
</html>

I think the problem is in the bgiframe call $(‘#nav li:hover ul’).bgiframe();.
I’ve copied the css that does the popup/dropdown list and used that for bgiframe… but I’ve tried every combination I can think of e.g. #nav or #nav ul or #nav ul ul… but the result is the same :frowning:

Sorry for not using hyperlinks, but as a new poster I’m not able to yet.