Internet Explorer vs Firefox..

Internet Explorer (IE) and Firefox are two of the most popular web browsers on the market but can interpret Javascript in different ways. A website which looks fine in IE can potentially look different in Firefox. This article will highlight seven examples as to where IE and Firefox differ and allow you as a developer to create a unified website regardless of browser type.

#1 Class and ID names are case sensitive in FireFoxWhen searching by ID, IE is not case senstive. For example to obtain the value of a variable called "lowercase" we would do the following:

The IE Syntax:document.getElementById("lowercase").value = true; // validdocument.getElementById("LOWERCASE").value = true; // also valid
The Firefox Syntax:document.getElementById("lowercase").value = true; // validdocument.getElementById("LOWERCASE").value = true; // invalid

#2 The CSS “float” propertyThe syntax for accessing a specific css property for any given object is object.style.property. But as the word “float” is already reserved for use in JavaScript, we cannot access the “float” property using object.style.float. Here is how we do it in the two browsers:

The IE Syntax:document.getElementById("object").style.styleFloat = "center";
The Firefox Syntax:document.getElementById("object").style.cssFloat = "center";

#3 document.all fails to work in FirefoxI.E introduced document.all in IE4 to allow access to the various parts of the web page. The correct way to access an element by id for both browsers is to call the document.getElementById() method with the id as a string as the argument.

The IE Syntax:document.getElementById("object").value = true; // validdocument.all.object.value = true; // also valid
The Firefox Syntax:document.getElementById("object").value = true; // validdocument.all.object.value = true; // invalid

#4 Getting the Cursor Position

The IE Syntax: var CursorPosition = [0, 0]; CursorPosition[0] = event.clientX; CursorPosition[1] = event.clientY; The Firefox Syntax: var CursorPosition = [0, 0]; CursorPosition[0] = event.pageX; CursorPosition[1] = event.pageY;

#5 Getting the Size of the Browser Window

The IE Syntax: var BrowserSize = [0, 0]; BrowserSize[0] = document.documentElement.clientWidth; BrowserSize[1] = document.documentElement.clientHeight;
The Firefox Syntax: var BrowserSize = [0, 0]; BrowserSize[0] = window.innerWidth; BrowserSize[1] = window.innerHeight;

#6 Strict Syntax Validation

FireFox validates syntax very strict. The following example will not work correctly without “px”:myDiv.style.width = (myDiv.offsetWidth – 50) + ‘px’; Whereas, IE will automatically add “px” if the developer overlooks this string.

#7 Looking up the text value of parent node. IE and FireFox treats it in different ways.
if(navigator.appName == “Microsoft Internet Explorer”) //IE{selectedValue = document.getElementById(myID).parentNode.innerText;}else if(navigator.appName == “Netscape”) //Firefox{selectedValue = document.getElementById(myID).parentNode.childNodes.item(1).innerHTML;}

Article Written by Paul Clifton

Visit Inferno Designs for more on Web Design, Web Optimisation and Logo Design.