This page list of some issues faced when writing HTML, CSS or JavaScript for different browsers. It will not cover the difference between their object models, only relatively unexpected differences. It is far from complete.
Each issue was noted when using only the browsers mentioned in it's description. Because of this other browsers may exhibit similar behaviour. For example, Mozilla behaviour may very well be similar to Netscape (NS) behaviour since they're based on the same source.
- Getting position of object with Javascript (IE, Mozilla)
- Margin differences (IE, NS, Mozilla)
- Missing images (IE, Mozilla)
- Location of style sheets (NS, IE)
- Refering to an image in style sheets (IE Mac)
Getting position of object with Javascript | Go to top
IE 5-6, Mozilla ?
In IE, getting the position of an object (with object.style.pixelLeft or object.style.pixelTop) returns the numerical position as an integer. The value can be used directly in any maths functions.
Doing the same in Mozilla (with object.style.left or object.style.top) returns a string that includes "px" as well as the numerical position, eg "30px". This means you cannot mathematically manipulate the value without first using parseInt to convert it into an integer.
Additionally, in Mozilla the position of an object can only be determined if it was explicitely set (even if the position is relative). This is not the case in IE.
Margin differences | Go to top
IE 5-6, NS 4.7, Mozilla ?
IE treats the margin-left, margin-right and text-indent CSS attributes differently from NS and Mozilla. IE indents lists by default (even if margin-left is 0), whilst NS and Mozilla do not.
Missing images | Go to top
IE 5-6, Mozilla ?
If you have an IMG tag where the height and width are specified but the src points to a non-existant file, IE will show a blank box at the specified size and Mozilla will show nothing.
Location of style sheets | Go to top
IE 5-6, NS 4.7
References to files from style sheets are treated differently. NS will interpret any paths relative to the location of the HTML document that references the style sheet, whilst IE will interpret paths relative to the style sheet's location. This means that in order to use relative paths in a style sheet it must be at the same depth in the directory structure as the HTML document that uses it.
For example, if an image location is "../../../images/background.jpg" with the style sheet in "page/themes/neg/style.css", the HTML document should also be 3 levels deep, say in "page/content/links/links.html". Alternativley all references to files should not be relative but instead use the full URI (e.g. http://mindSpill.net/page/images/background.jpg").
Refering to an image in style sheets | Go to top
IE 5.1 for Mac
In a style sheet, do not use single quotes to surround the any image URIs because it causes problems with Internet Explorer v5 for the Mac.
