DIV positioning problem

Hi

I can't find out way to get my script working correctly under all browser.

I am working on simple text horizontal menu ( span items into div panel ). On mouse over event over all of items, CustomMouseOver function displays hint with fadeout/in effect. But i have problem wth positioning that hint ( div as hint body and img as arrow ).

It is simple DOM example:
BODY
...DIV (position absolute)
......SPAN = About us (position block-inline)
......SPAN = Contact (position block-inline)
......SPAN = Map (position block-inline)
...IMG arrow (position absolute)
...DIV hint (position absolute)


Hint must be displayed at position y: item.top + item.height + 18*2 but:
Span's clientHeight in Opera = -7 ( real height - top and bottom padding )
Span's clientHeight in Firefox = 0 ( clientHeight = | real height - top and bottom padding | )
Span's clientHeight in IE = 0 ( clientHeight = | real height - top and bottom padding | )
Span's clientHeight in Konqueror = real height (17px)

And now I do not know how to make a one script for one browser without if-browser instructions.

Here is most important part my creating function:

// this.popup is a div of hint
// this.popup_arrow is a arrow of hint
	GInlineTextMenu.prototype.CustomOnMouseOver = function( object, id )
	{
		this.mode = 0;
		if ( id != this.popup_underitem )
		{
			this.popup_underitem = id;
			if ( this.popup_created == 0 )
				this.popup_opacity = 0;
			if ( this.popup_created == 0 )
				this.popup_arrow = document.createElement("img");
			this.popup_arrow.id = this.control_name + "_arrow";
			this.popup_arrow.setAttribute("src", this.popup_arrow_addr );
			this.popup_arrow.style.position = "absolute";
			this.popup_arrow.style.filter = 'alpha(opacity=' + 50 + ')';
			this.popup_arrow.style.opacity = (this.popup_opacity / 100); 
			this.popup_arrow.style.MozOpacity = (this.popup_opacity / 100); 
			this.popup_arrow.style.KhtmlOpacity = (this.popup_opacity / 100); 
			this.popup_arrow.style.filter = 'alpha(opacity=' + this.popup_opacity + ')';
			if ( this.popup_created == 0 )
				this.popup = document.createElement("div");
			this.popup.className = this.style_popup;
			this.popup.id = this.control_name + "_popup";
			this.popup.style.position = "absolute";
			this.popup.style.filter = 'alpha(opacity=' + 50 + ')';
			this.popup.style.opacity = (this.popup_opacity / 100); 
			this.popup.style.MozOpacity = (this.popup_opacity / 100); 
			this.popup.style.KhtmlOpacity = (this.popup_opacity / 100); 
			this.popup.style.filter = 'alpha(opacity=' + this.popup_opacity + ')';
			this.popup.innerHTML = this.item[id].hint;
			if ( this.popup_created == 0 )
				document.body.appendChild( this.popup );
                        if ( this.popup.clientWidth + document.getElementById(this.control_name+"_itm"+id).offsetLeft  < document.body.clientWidth )
			{
				this.popup.style.left = document.getElementById(this.control_name+"_itm"+id).offsetLeft - 10 + "px";
			}
			else
			{
				this.popup.style.left = document.body.clientWidth - this.popup.clientWidth - 10 + "px";
			};
			this.popup.style.top = document.getElementById(this.control_name+"_itm"+id).clientHeight + document.getElementById(this.control_name+"_itm"+id).offsetTop + 18 + 10 + "px";
			this.popup_arrow.style.left = document.getElementById(this.control_name).offsetLeft + document.getElementById(this.control_name+"_itm"+id).offsetLeft + (document.getElementById(this.control_name+"_itm"+id).clientWidth / 2 ) - 7 + "px";
			this.popup_arrow.style.top = this.popup.offsetTop - 18 + "px";
			if ( this.popup_created == 0 )
				document.body.appendChild( this.popup_arrow );
			var func = object+".Show()";
			for ( var ii=1; ii < 24; ii++ )
			{
				setTimeout(func,30*ii);
			};
			this.popup_created = 1;
			this.mode = 0;
		};
	};

Code (markup):

Popup is displaying over menu item. Arrow, in Opera and Konqueror over menu and at center of item. But Firefox and IE displays arrow at left of item.

It is passible to modificate this script and make that works?