IE Select Box Bug: this is when you have a dropdown <select> box and you need to place an element over it temporarily like a pop up navigation menu similar to the ypslideout menu or any other <div> element. I mention the ypslideoutmenu because I was just using it because of it being “Search Engine Friendly” and needed to make one of the menus longer to add an additional page, but it went into a select box that I used for filtering data on multiple but similar pages.
I did not want to modify all the pages and place the select’s in a “less user friendly” location, nor did I want to change the menu system that users were comfortable with. With a fair amount of researching the issue, I found a potential solution. That was the “Iframe Select Box Hack and Bug Fix”. Here is a version using JavaScript to create the Iframe and get ride of it when you don’t need it here is the Javascirpt Iframe link.
Below is my static version that I got to work for my needs. The object is to create an IFrame (which actually can cover the select box) and then place your other code and text in front of the Iframe. You don’t actually load anything in the Iframe. I found that the Iframe could not be “visibility:hidden;” or “display:none;” and still cover the select item, so I turned the “alpha(opacity=0)” so that it is invisible to the user.
<div id="menu4Container" style="">
<!--IFRAME IE HACK to cover SELECT dropdown list boxes. Iframe needs to be resized for menu height and width. -->
<iframe id="menu4iframe" src="javascript:'';" marginwidth="0" marginheight="0" align="bottom" scrolling="no" frameborder="0" style="position:absolute; left:0; top:0px; display:block; filter:alpha(opacity=0);" ></iframe>
<div id="menu4Content" class="menu">
<div class="navlist" >
<ul>
<li><a href="#">test 1</a></li>
<li><a href="#">test 2</a></li>
<li><a href="#">test 3</a></li>
<li><a href="#">test 4</a></li>
</ul>
</div>
</div>
<br> </div>
9 comments ↓
Thanks for this! It worked just fine for me when I broke the code down to this:
#oBox_iframe
{
width:100%;
height:100%;
position:absolute;
left:0;
top:0px;
display:block;
filter:alpha(opacity=0);
-moz-opacity: 0.80;
opacity: 0.80;
}
I gave it a 100% width and height to take up the whole screen and cover all drop menus. Once the user clicks the prompt, you must close the i-frame or your page will be un-clickable.
I had to leave the frameborder attribute or else I was left with unwanted scrollbars in the browser window.
I also added the opacity code for other browsers.
Thanks again! This saved the day for me!
Chris,
I am glad it worked for you. It took me a good day to put together bits and pieces of info together to get it to work, some bits worked others didn’t.
I don’t know what your exact need was, but for my “dropdown” menus, I didn’t want ALL(if more than one) select boxes to disappear when the menu came down. I felt that there was potential to distract or confuse the user. For me it felt distracting if the entire
<select> disappeared when only a portion was covered by the menu.
Where can I see this in action?
Can anyone send the working script by email?
well.floripa@gmail.com
Hi,
You might want to test my Select Fix which corrects this bug : http://www.fabien-molinet.fr/index.php?option=com_content&task=blogsection&id=8&Itemid=9
You won’t have to put obscure code like IFRAME in your webpages anymore.
Give me some feedback !
Best regards,
Fabien Molinet
Hi,
I found this page because I had the problem with the select showing through my popup div. Your solution made me think of another: I put the select statement inside a div and my function call that sets my popup div to display:block, also sets the div containing the select statement to display:none. The ‘close window’ link reverses these. It works great in IE6 and all others. Here’s the code:
function show_message() {
var d = document.getElementById(”message”);
d.style.display = “block”;
var e = document.getElementById(”selection”);
e.style.display = “none”;
}
function close_window () {
var d = document.getElementById(”message”);
d.style.display = “none”;
var e = document.getElementById(”selection”);
e.style.display = “block”;
}
The div containing the message has id: message, and the div containing the select statement has id: selection.
Best,
Chad
Sorry….the last lines in the post did not come through….
Here is what it should read:
I have a similar situation, but instead of the menu being a on the same page as the selects, the selects are contained within a page already loaded in an IFRAME.
In other words, I have a page that contains a drop-down menu. Below the menu, I have an IFRAME that changes the page source based on the selection in the drop-down menu. The SELECTS in the pages (contained in the IFRAME) are bleeding through the DIV menu of the main page. Adding an IFRAME on the same page of the menu doesn’t seem to work.
Any ideas?
Thanks for your solution Fabien Molinet. It is very easy to use.
If you need help with this code let me know I can show you working examples on my site http://www.thenextinternetmillionaires.com
you can also obscure this with javascript, having the iframe in a js file and calling it in the html source, so it does not look so clear what your doing
Leave a Comment