AJAX select list issue in IE6 Jan11 '06

# (1 of 4): Josh » joahua.com/blog

10 hours, 42 minutes after the fact. (Thu 12 Jan 2006, 1:48 AM 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)!

# (2 of 4): Matthom

17 hours, 9 minutes after the fact. (Thu 12 Jan 2006, 8: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.

Previous comment Return to entry

# (3 of 4): Josh » joahua.com/blog

1 week, 2 days after the fact. (Fri 20 Jan 2006, 3: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 :-/

Previous comment Return to entry

# (4 of 4): Alan Blount » zeroasterisk.com

6 months, 3 weeks after the fact. (Thu 03 Aug 2006, 10: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 shimURL_http = ’about:blank’;
var shimURL_https = ’/Custom_Components/HTML/blank.html’;
var shimURL = (window.location.href.toLowerCase().indexOf(’https://’) == 0 ? shimURL_https : 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

Previous comment Return to entry