Fix Overlapping of DIV tags and select box in IE6

Tought to start a blog in the last day of this year. Well happy new years eve to you all. Im going to use this blog as a place to share some tips i found during my work.

This is a fix i found in a blog posted somewhere else but did some small modifications to get it working for me.

function fixIE(element, element_iefix) {

element_iefix.style.top = element.style.top;
element_iefix.style.left = element.style.left;
element_iefix.style.width = element.offsetWidth ;
element_iefix.style.height = element.offsetHeight;
element_iefix.style.zIndex = 1;
element.style.zIndex = 2;
}


function fixIEOverlapping(element) {

if(!element.id) element.id = 'dummy123';//dummy id

if( (navigator.appVersion.indexOf('MSIE')>0)
&& (navigator.userAgent.indexOf('Opera')<0) && (Element.getStyle(element, 'position') == 'absolute')){ new Insertion.After(element.id,

'<iframe id="' + element.id + '_iefix" ' +

'style="position:absolute;filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);border:none;background:none;width:auto;height:auto;" ' +

'src="javascript:false;" frameborder="5" scrolling="no"></iframe>');


setTimeout(function() {
fixIE(element, $(element.id + '_iefix'));
}, 50);
}
}



To use this you have to insert prototype.js from prototype javascript framework and call the fixIEOverlapping() passing the div object to the function.
The div should have the style position: absolute; for this to work.


Use document.getElementById('divId') to get the div object.

One issue I encounter is to get the width and the height of a div. element.style.width does not work for div tags unless you set it in a CSS.

The easiest way to get the width and height of a div is to use element.offsetWidth and element.offsetHeight where element is the div object.