Wednesday, December 31, 2008

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.offsetWidth ; = element.offsetHeight; = 1; = 2;

function fixIEOverlapping(element) {

if(! = 'dummy123';//dummy id

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

'<iframe 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, $( + '_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. 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.