MSIE vs FX

Standardization Issues in DHTML

  This document is Copyright (c) Information Technology Group,
  www.itgroup.ro, Alin Avasilcutei, Cornel Paslariu, Virgil Mager.

  Permission is granted to copy, distribute and/or modify this document
  under the terms of the GNU Free Documentation License, Version 1.2
  with no Invariant Sections, no Front-Cover Texts, no Back-Cover Texts.

This document lists (some of) the show-stopper differences between the Internet Explorer (a.k.a. IE) and Firefox (a.k.a. FX) browsers strictly in the context of the information contained in this documentation package, and presents a cross-browser compatibility solution to each problem. Many more differences and incompatibility nuances exist, but they are related to browser functions that are not presented in this documentation.

IMPORTANT: this documentation package does not introduce the notion of 'DOCTYPE', and also only refers to HTML files that do not include any 'DOCTYPE' declaration, such that the browser is allowed to select the most flexible compatibility mode. In the presence of a 'DOCTYPE' declaration, many of the HTML, JavaScript, DOM, and even CSS constructs presented in this package may either not work at all, or behave differently between the two browsers (this holds true for both 'transitional' and 'strict' doctypes).

Internet Explorer vs Firefox

Document window size:
- In FX, the size of a document's visible area inside the browser window can be obtained with two dedicated 'window' object properties: 'window.innerHeight' and 'window.innerWidth'. These two values represent of the displayed document's visible area excluding the possible scrollbars.
- IE does not provide an equivalent for 'window.innerHeight' or 'window.innerWidth', but both IE and FX provide a set of similar properties for the 'document' object, representing the size of the displayed document's visible area including the possible scrollbars: 'document.offsetHeight' and 'document.offsetWidth'.
  - caveat: the 'offsetHeight' and 'offsetWidth' properties cannot be used before the browser loads the '<body>' element, e.g. they cannot be used by a script placed in the 'head' section of the document and which is run when the document first loads in the browser; however, these properties can be used e.g. by an event handler that captures an event that occurs after the document has loaded.
The 'event' object:
- In FX the 'event' object is generated by the object that triggers the event, and it can be used as an argument by the event handler via the keywork 'event'.
- In IE the 'event' object is a property of the 'window' object that contains the document where the event occured, and is accessible from the event handler via the 'window.event' syntax.
- The 'event' object's properties in IE and FX are very similar, and they are presented in the 'Introduction to JavaScript document', the 'event properties' section. The only important differences consist of:
  - the property which returns the ASCII code of the key that was pressed if the event is related to the keyboard: 'which' for FX, and 'keyCode' for IE
  - the standard property which returns a reference to the browser object that triggered the event is 'traget'; FX implements the standards 'target' property, while in MSIE the name of this properety is 'srcElement'
  - the standard property that indicates the browser object in conjuction with which an event handler is being executed at any given time (this may be different from 'target' during the event bubbling phase) is 'currentTarget'. FX implements this property, while MSIE neither implements it nor does it provide an equivalent.
  - only the left-button (i.e. button 0) mouse events are captured by IE
The 'ondblclick' event:
- In FX, when a doubleclick event occurs as a result of two successive mouse clicks, the browser generates first two 'onclick' events (one for each of the two successive clicks), and then a final 'doubleclick' event. Thus, a doubcle-click in FX triggers a succession of three events: two successive 'onclick' events, followed by one 'ondblckick'.
- In IE, when a doubleclick event occurs as a result of two successive mouse clicks, the browser generates first one single 'onclick' event, and when the second click occurs and is recognized by the browser as being part of a double-click, a final 'doubleclick' event is immediately generated. Thus, a doubcle-click in IE triggers a succession of two events: an 'onclick' event followed by a 'ondblckick'.
The 'position:fixed' CSS property:
- FX properly implements the 'position:fixed' property in a "normal" HTML document (i.e. without a 'DOCTYPE' declaration)
- IE does not implement the 'position:fixed' property in a "normal" HTML document (i.e. without a 'DOCTYPE' declaration).
  - note: IE 7,8 do implement this property, but only for 'strict' HTML; this type of HTML is not discussed in this documentation.
Text selection:
The method for determining the text selection in a browser window is not standardized at the time of writing this document, and it differs widely between browsers; furthermore, it is highly plausible for the current methods for determining the text selection to change radically in the near future.

FX method: selectedText=window.getSelection().toString();
IE method: selectedText=document.selection.createRange().text;
Important difference between the FX and IE browsers: if the selected area includes text input boxes, FX does not return the text inside the text inputs, while IE does.