Monday, September 14, 2009

How to Fix the IE6 Select Box z-index Bug

This is my first time experienced the IE6 z-index bug where a simple select box will always take priority over any predefined z-indices and always show up on top. see the screenshot:


I did search around and luckily discovered that there is a fix -JQuery plugin which by using an iframe and expanding it over the select box area, the iframe will take precendence over the select box. This JQuery plugin will automatically create the iframe for you. The plugin is simply called bgiframe and using it is quick and easy. Just include the script and attach the bgiframe() method to all of your floating layers. Here is a short and quick example:

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.bgiframe.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#floating_div').bgiframe();
}
</script>
</head>
<body>
<select>
<option>Test</option>
</select>
<div id="floating_div">I'm over this select box</div>
</body>
Now those nasty z-index bugs won’t ever trouble you ever again.

0 comments:

Post a Comment