margin differences (Firefox-IE)

[Cyclone]

Hi,

I am trying to get the pages of my site to validate and render as close as possible in Firefox and IE. So far I got them to validate and everything renders the same in both browsers except for the position of the tooltip window in relation to the mouse cursor.

As you can see in the image below they don’t match up. I was able to solve this by using browser detection code and adding a margin of 2px.

// if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)) {tipcss.margin='2px';}

Script

// Resize window (Maximize). //
top.window.moveTo(0,0);
if (document.all) {
top.window.resizeTo(screen.availWidth,screen.availHeight);
}
else if (document.layers||document.getElementById) {
if (top.window.outerHeight<screen.availHeight||top.window.outerWidth<screen.availWidth){
top.window.outerHeight = screen.availHeight;
top.window.outerWidth = screen.availWidth;
}
}
// End of resize Code. //

/***********************************************
* Image w/ description tooltip- By Dynamic Web Coding (www.dyn-web.com)
* Copyright 2002-2007 by Sharon Paine.
* Note this is an edited version. See link below for the original script.
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

// I replaced the 'tipcss.visibility' property throughout the original script with 'tipcss.display' to remove a bug that occurred when using an IFRAME inside the tooltip window. Some of the contents(table borders) in the IFRAME window would not disappear after the hidetip() function was called.
// The 'Xposition' and 'Yposition' variables were added to the 'doTooltip()' function so that the x/y tooltip offset positions can be specified seperately for each tooltip link.

var dom = (document.getElementById) ? true : false;
var ns5 = (!document.all && dom || window.opera) ? true: false;
var ie5 = ((navigator.userAgent.indexOf("MSIE")>-1) && dom) ? true : false;
var ie4 = (document.all && !dom) ? true : false;
var nodyn = (!ns5 && !ie4 && !ie5 && !dom) ? true : false;
var origWidth, origHeight;
var t1,t2;
var tipOn = false;
if (nodyn) { event = "nope" }

///////////////////////  CUSTOMIZE HERE   ////////////////////
var tipFollowMouse= true;
var offX= 0; // Don't change the offX/offY positions here.
var offY= 0; // You can specify their values in the link code(onMouseover).
var tipFontFamily= "Arial";
var tipFontSize= "8pt";
var tipFontColor= "#7C92B8";
var tipBgColor= "#212630";
var tipBorderColor= "#276F91";
var tipBorderWidth= 3;
var tipBorderStyle= "Solid";
var tipPadding= 0;
if (tipHeight==0) {tipHeight=800}; if (tipWidth==0) {tipWidth=404}; // This line sets the defualt iframe height and width.
////////////////////  END OF CUSTOMIZATION AREA  ///////////////////

if (document.images) {
	var theImgs = new Array();
	for (var i=0; i<messages.length; i++) {
  	theImgs[i] = new Image();
		theImgs[i].src = messages[i][0];
  }
}

var startStr = '<table style="width:' + tipWidth + 'px;border-collapse:collapse"><tr><td style="height:' + tipHeight +'px;padding:0px"><IFRAME src="'; // These two lines contain html(etc) code which is used to create the contents of the tooltip window.
var endStr = '" style="width:' + (tipWidth - 2) + 'px;height:' + (tipHeight - tipBorderWidth) + 'px" frameborder="0" onMouseover="clearTimeout(t2)" onMouseout="hideTip(1)"</td></tr>';

var tooltip, tipcss;

function initTip()
{
	if (nodyn) return;
	tooltip = (ie4)? document.all['tipDiv']: (ie5||ns5)? document.getElementById('tipDiv'): null;
	tipcss = tooltip.style;
	if (ie4||ie5||ns5) {
		tipcss.width = 'auto';
		tipcss.fontFamily = tipFontFamily;
		tipcss.fontSize = tipFontSize;
		tipcss.color = tipFontColor;
		tipcss.backgroundColor = tipBgColor;
		tipcss.borderColor = tipBorderColor;
		tipcss.borderWidth = tipBorderWidth+"px";
		tipcss.padding = tipPadding+"px";
		tipcss.borderStyle = tipBorderStyle;
		tipcss.textAlign='center';
		tipcss.margin='0px auto';
	}
	
	// if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)) {tipcss.margin='2px';}

	if (tooltip&&tipFollowMouse) {
		document.onmousemove = trackMouse;
	}
}

window.onload = initTip;

function doTooltip(evt,num,Xposition,Yposition)
{
	if (!tooltip) return;
	if (t1) clearTimeout(t1);
	if (t2) clearTimeout(t2);
	tipOn = true;
	offX = Xposition
	offY = -Yposition - tipHeight

	if (messages[num][2])	var curBgColor = messages[num][2];
	else curBgColor = tipBgColor;

	if (messages[num][3])	var curFontColor = messages[num][3];
	else curFontColor = tipFontColor;

	if (ie4||ie5||ns5) {
		var tip = startStr + messages[num][0] + endStr;
		tipcss.backgroundColor = curBgColor;
	 	tooltip.innerHTML = tip;
	}

	if (!tipFollowMouse) positionTip(evt);
	else t1=setTimeout("tipcss.display='block'",100);
}

var mouseX, mouseY;
function trackMouse(evt) {
standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
mouseX = (ns5)? evt.pageX: window.event.clientX + standardbody.scrollLeft;
mouseY = (ns5)? evt.pageY: window.event.clientY + standardbody.scrollTop;
if (tipOn) positionTip(evt);}

function positionTip(evt)
{
	if (!tipFollowMouse)
	{
		standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body
		mouseX = (ns5)? evt.pageX: window.event.clientX + standardbody.scrollLeft;
		mouseY = (ns5)? evt.pageY: window.event.clientY + standardbody.scrollTop;
	}

	var tpWd = (ie4||ie5)? tooltip.clientWidth: tooltip.offsetWidth;
	var tpHt = (ie4||ie5)? tooltip.clientHeight: tooltip.offsetHeight;
	var winWd = (ns5)? window.innerWidth-20+window.pageXOffset: standardbody.clientWidth+standardbody.scrollLeft;
	var winHt = (ns5)? window.innerHeight-20+window.pageYOffset: standardbody.clientHeight+standardbody.scrollTop;

	if ((mouseX+offX+tpWd)>winWd)
		tipcss.left = mouseX-(tpWd+offX)+"px";
	else tipcss.left = mouseX+offX+"px";

	if ((mouseY+offY+tpHt)>winHt)
		tipcss.top = winHt-(tpHt+offY+Yposition)+"px";
	else tipcss.top = mouseY+offY+"px";
	if (!tipFollowMouse) t1=setTimeout("tipcss.display='block'",100);
}

function hideTip(mouseout)
{
	if (mouseout==1)
	{
		tipOn = false;
		t2=setTimeout("tipcss.display='none'",286);
		document.getElementById('link1').blur();
	}

	else

	{
		if (tipOn==true)
		{
		tipOn = false;
		t2=setTimeout("tipcss.display='none'",100);
		document.getElementById('link1').blur();
		}

		else

		{
		tipOn=true;
		tipcss.display='block';
		}
	}
}
document.write('<div id="tipDiv" style="position:absolute; display:none; z-index:100"></div>')

But I don’t want to have to resort to this method. I’m sure its possible without it. It seems there’s an extra 2px margin around the tooltip window in Firefox. Anyone know how to remove this? I tried so many things but still couldn’t figure it out.

Thanks.
Have a good weekend.

[jscheuer1]

Two observations.

• It is impossible to tell from your image if this slight difference is of any importance. A tooltip need not be exactly identical across browsers, as long as it's legible, doesn't appear ugly, and appears in the vicinity of its trigger.
  
• If you are going to make a change based upon browser, the browser you should target is probably IE, as FF is generally how all other browsers will render things.

Targeting IE in javascript is easy and is not some hack based upon the navigator object (which can be spoofed, and may change in future browser versions):

		tipcss.borderColor = tipBorderColor;
		tipcss.borderWidth = tipBorderWidth+"px";
		tipcss.padding = tipPadding+"px";
		tipcss.borderStyle = tipBorderStyle;
		tipcss.textAlign='center';
		tipcss.margin='2px';
	}
	
		/*@cc_on @*/
		/*@if(@_jscript_version >= 5)
		tipcss.margin='0 auto';
		@end @*/
	
	if (tooltip&&tipFollowMouse) {
		document.onmousemove = trackMouse;
	}
} . . .

The above uses a conditional code block that is a documented feature of IE, and that all other browsers will see as a script comment block.

Now, IE may change though. Version 8 is said to be the most compliant ever. It may not have a problem with tipcss.margin='2px';. If so, we can use the navigator object to get the version inside the conditional code block, because we know we will only be dealing with IE, which does not spoof version numbers:

		/*@cc_on @*/
		/*@if(@_jscript_version >= 5)
		if(navigator.appVersion.replace(/^.*MSIE (\d+).*$/, '$1') <= 7)
		tipcss.margin='0 auto';
		@end @*/

[Cyclone]

Thanks for your advice. I'm still a bit unsure if I should even use browser specific code. Out of all the differences between IE/FF they were mostly due to the fact that margins/padding weren't declared in the code. So I'm kinda thinking the same here. I would like to make sure that I can if possible do this the right way.

And what do you mean by " navigator object (which can be spoofed)"?

Here is a link to the page that runs the tooltip code.
http://www.inspiredvisuals.com/Cgtalk/test.html

Thank You.

[jscheuer1]

It is possible that by using a 'lowest common denominator' approach to styling, that you could avoid needing to be browser specific and still get identical rendering across browsers. However, the major reason why IE will render differently than virtually any other modern browser in a case like this is due to a difference in its native box model. This is a situation where IE counts margins and borders as part of the width of a block level element and other browsers do not (or the other way around, frankly I'm not one to bother with knowing the exact mechanisms as long as I understand the concept and what to do about it).

Further, as already stated, if the difference isn't critical, forget about it. There is no reason why all browsers must render everything identically, as long as everything works and looks OK.

Finally, if you need to use browser specific code, generally it is best to make the exception for IE, for reasons already noted. Additionally IE has documented features for allowing this, both in HTML and in javascript, so there is nothing to fear as far as using a browser specific hack (hacks usually work, but are unreliable as they require undocumented features of a given browser to remain in future versions).

Now, as to the navigator object, whenever you do:

navigator.whatever

you are accessing a property of the navigator object of the browser. This will of course be different in different browsers. That's why it can potentially tell us something about which browser is being used to view the page. However, with the exception of IE, all other browsers have, at least at some point in their history, offered methods for their users to spoof other browsers via the navigator object, either for troubleshooting or to gain access to sites that require a specific browser.

[Cyclone]

The differences aren't too great and I got a bunch of workounds so I guess knowing the true reasons the browsers render differently isn't too important. Thanks again for your advice.