Chrome and "Select" Boxes

[jswidorski]

I have an issue with Chrome and wonder if anyone has a work around example for it. When I execute the drop down menu and it goes over a "select" drop down, the select drop down bleeds through the menu. I have searched on the web and it has to do with select boxes being on a separate layer, or something like that" that the rest of the page.

It is my understanding that you need a wrapper like iframe to cover up that select drop down.

Has anyone else encountered this? Chrome is really nice though.

I like it alot.

Here is the link. If you put your mouse over "Claim Services"
https://testsecure.meemic.com/claimauto1CKR.htm

Thanks, John

[Twey]

In IE, yes. All you have to do is hide select elements when displaying the menu, and show them again when it's been drawn.

function hideAllSelects() {
  var e=document.getElementsByTagName("select");
  for(var i=0;i<e.length;i++) e[i].style.visibility = "hidden";
}

function showAllSelects() {
  var e=document.getElementsByTagName("select");
  for(var i=0;i<e.length;i++) e[i].style.visibility = "visible";
}

[jscheuer1]

I have for quite some time thought that the only way to drop down over a select in IE was to hide it. Lately though, it has come to my attention that yes, one can construct an iframe 'shim' for the drop down. This can be rather tricky in practice but the principal is easy enough. The advantage is that it looks much more professional than hiding the select, especially when a drop down would otherwise only partially cover the select. Now this will only work in IE5.5 pc/win plus and may no longer be needed and in fact could be a problem in IE7. That and the fact that it looks bad in FF and will obscure the drop down in Opera is what makes it so tricky. The principal is to make an iframe that can be displayed under the drop down, make it the same height and width and display it at the same coordinates and have its z-index less than the drop down. That's all there is to it, basically. I modified DD's anylink drop down menu to do this and shielded the iframe from other browsers, including IE7, using an iframe set in two IE conditional comments in the head of the page before any scripts that would use it:

<!--[if lte IE 6]>
<!--[if gte IE 5.5]>
<iframe id="dropmenuiframe" src="" style="z-index:99;display:none;position:absolute;"></iframe>
<![endif]-->
<![endif]-->

You will note that the iframe has a z-index of 99 so the drop down(s) will need a z-index of 100 or more. In the javascript code, I created a global variable:

var ie5_5=typeof dropmenuiframe=='undefined'? 0 : 1

This variable can then be tested before performing any operations connected to the iframe:

if (ie5_5) {
do iframe stuff here
}

I realize this is complicated but the results are worth it.

[Twey]

Not much to do with the thread, but...

var ie5_5=typeof dropmenuiframe=='undefined'? 0 : 1

I've noticed quite a few people do this recently, and it puzzles me slightly. Comparison operators return true or false already; there's no need to use the if operator. That code could just as easily be:

var ie5_5=(typeof dropmenuiframe=='undefined')

[jscheuer1]

Not much to do with the thread, but...I've noticed quite a few people do this recently, and it puzzles me slightly. Comparison operators return true or false already; there's no need to use the if operator. That code could just as easily be:

var ie5_5=(typeof dropmenuiframe=='undefined')

Er, point taken but, that reverses the value.

[Twey]

Oops.

var ie5_5=(typeof dropmenuiframe!='undefined')

[jscheuer1]

While we are at the business of condensing the code:

var ie5_5=typeof dropmenuiframe!='undefined'

I think you should be able to:

var ie5_5=dropmenuiframe

But only in IE>=5.5<=6 (where dropmenuiframe exists) will that have a happy result. But, to my way of thinking, in other browsers ie5_5 should become known as undefined and return false when later tested. Sadly, this is not the case.