AJAX select list issue in IE6

January 11, 2006 / Filed under: Browsers, Web Development

Today I put some AJAX into a form I’m working on, in order to more smoothly facilitate finding a person’s name from a database.

The approach works great, except in IE 6, any select lists that reside underneath the DHTML layer show through:

Screen shot of select lists showing through layer

This doesn’t seem to happen for any other form element, and it only happens in IE 6. Firefox displays it properly.

Comments/Mentions

# Josh at 1/11/2006 11:48 pm cst

z-index is (probably) your friend. May also help to set position:relative. I was actually having similar problems today (though not with AJAX per-se, seeing as the JavaScript was pulling in plain text and not XML... no matter)!

# Matthom at 1/12/2006 6:15 am cst

Good ideas...

For now, I just went ahead and used styles to "hide" the obtrusive select lists, when the DHTML layer is shown:

document.getElementById('selectListID').style.visibility = 'hidden';

And then when the DHTML layer goes away, I make the select lists visible again.

document.getElementById('selectListID').style.visibility = 'visible';

Eh. Works for now.

# Josh at 1/20/2006 1:43 pm cst

Hey that's a good solution! I had this problem a few days later but had forgotten about this post... oops. BUT, apparently it's been fixed for IE7, so... we can all be happy in ten years when everyone adopts :-/

# alan blount at 8/3/2006 8:18 am cst

IE6 = devil.

one of the best work arounds for IE6 not listening to z-index, is to generate an <IFRAME> for every floating div and resize it to fit the floating div, and z-index below it... this is usually called the "shim" technique - searching for it should find you good code or you can look at one implimentation of it I did (note, you should only do this for IE5 )

var shimURLhttp = ’about:blank’;
var shimURLhttps = ’/CustomComponents/HTML/blank.html’;
var shimURL = (window.location.href.toLowerCase().indexOf(’https://’) == 0 ? shimURLhttps : shimURL_http );
function underlayShim(elObj) {
//alert(’underlayShim(’ dumpthis(elObj) ’)’);
try {
// get top layer
layerTop = $(elObj);
// get shim layer
if (!$(layerTop.id ’Shim’)) {
document.body.insertAdjacentHTML("beforeEnd",’’);
}
layerShim = $(layerTop.id ’Shim’);
// set attribute for future shim needs
layerTop.shimID = layerTop.id ’Shim’;
// position