I found a bug in IE 8 related to showing and hiding div elements.

I have some simply JavaScript code that runs when a button the page it clicked.

<input class="optionsbutton" type="button" name="ButtonHide" value="Show" OnClick="showoptions( true )"/>

The showoptions function is quite simple as are the functions it calls:

function showobject( name ) 
{
	var obj = document.getElementById(name );
	if( obj == null )
		return;
	obj.style.display = "block";
	obj.style.visibility = "visible";
}

function hideobject( name ) 
{
	var obj = document.getElementById(name );
	if( obj == null )
		return;
	obj.style.display = "none";
	obj.style.visibility = 'hidden';
}

function showoptions( showthem )
{
	if( showthem != 0 )
	{
		hideobject( 'joboptionsalternate' );
		showobject( 'joboptions' );
	}
	else
	{
		hideobject( 'joboptions' );
		showobject( 'joboptionsalternate' );
	}
}

The funny thing that happens is that the margins are handled poorly in IE 8. To be more specific, when the previously hidden div is shown, the margins between it and the divs above and below it are zero. IE does not handle the margin collapse correctly or makes some other stupid mistake.

Before I mention the fix, which I got from a hint on some forum where a similar problem is discussed, I’ll describe the really odd thing that happens in Internet Explorer; If I press the mouse button while on any button on the page, the page gets fixed. It happens on the button being pressed, not released. I can move the mouse out of the browser window to release the button and the page just looks right.

The above behavior and a hint on a forum led to to the fix which is to read something in the DOM to cause IE to recalculate the layout before returning from my JavaScript function.

Here is the one line I ended up adding to the end of the showobject() and hideobject() functions:

	tmp = obj.offsetTop;

Now IE shows thing correctly! Yay!

Boo to Microsoft for trying to be clever or at least not making a browsers that works as well as the rest.

Leave a comment