"Well, customer first!", it bit me as the old man said.
Since we like easy fix, we would like to go a scripting way to deal with that. Actually, there's no easy fix at all until you know what you're doing.
Nice article with follow-up by an ASP.NET developer is found while it applies to any other projects using PHP, Python, Ruby or Perl. Anyway, we go for the way by using jQuery.
People are arguing about the way in using iframe to overcome a situation:
- People work on web applications for IE6.
- People think about using Javascript to create dynamic pop-up menu with DIV elements.
- People would like to create DIV overlay on top of the current web page which has SELECT elements underneath.
- DIV overlay can cover any other web elements except SELECT boxes and it looks ugly.
SELECT element is found to be one of the ActiveX objects in IE6 implementation. This doesn't apply to Firefox or Chrome or even Safari as they don't use ActiveX technology.
ActiveX is set to be higher z-index than any other web elements so it will always appear on top. This causes bad user experience while DIV overlay menu cannot cover a SELECT element. User may complain and say that your app has a bug. Well, a bug in IE6, indeed.
In an old way, we used to hide SELECT elements underneath but it's a bit out of control when the webpage contains some previously hidden SELECT elements and you don't want to make them appear again by accident.
As it's something about ActiveX objects, we go for the ActiveX way to resolve this.
Solution! Solution!
Among those ActiveX objects, IFRAME is fortunately one of them, too. So, we can make use of transparent IFRAME object to cover everything including existing ActiveX objects like SELECT. When a new ActiveX object is created after the old one, it would get the higher z-index on top.
Some people suggest simply embedding the IFRAME element into DIV container but it doesn't really work when accessing the webpage over SSL connection (HTTPS). Most secured web application would provide services over HTTPS. In this case, it will trigger an alert window with that Javascript statement in src attribute.
<div> ... <iframe id="transparent_frame" src="javascript:false;"></iframe> </div>
Here comes a better approach:
<div> ... <iframe id="transparent_frame" src="javascript:'<html></html>';"></iframe> </div>
This displays nothing but empty HTML page within iframe element. It simply keeps the browser silent over HTTPS and do the things we want.
Of course, we need to set CSS style for this IFRAME to be transparent and covering the whole area of DIV container (set your favourite width and height, please) so it will not affect any other elements within DIV container.
CSS Stylesheet:
#transparent_frame iframe
{
position: absolute;
z-index: -1;
filter: mask();
border: 0;
margin: 0;
padding: 0;
top: 0;
left: 0;
width: 9999px; /* Set desired width */
height: 9999px; /* Set desired height */
overflow: hidden;
}Is the problem solved? Not yet, it's bloody IE!
One problem that came across would be the memory leak in IE browser when we add new IFRAME dynamically by jQuery and then remove it. I can see the memory consumption of IEXPLORER.EXE increases dramatically in Task Manager until the system becomes unresponsive.
To avoid this, please make sure we are not creating new IFRAME one at a time when DIV overlay is shown up. Try reusing the same IFRAME to do the job and things would be fine.
In the experiment, a single IFRAME is created and reused until next page reloading without any memory leak issue on IE browsers which is good.
Ref:
http://weblogs.asp.net/bleroy/archive/2005/08/09/how-to-put-a-div-over-a-select-in-ie.aspx
