Cross-browser Compatibility

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 | Go to top

IE 5-6, Mozilla ?

In IE, getting the position of an object (with or returns the numerical position as an integer. The value can be used directly in any maths functions.

Doing the same in Mozilla (with or 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.").

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.

Last modified: 06/05/2006 (most likely earlier as a site migration in 2006 reset some dates) Tags: (none)

This website is a personal resource. Nothing here is guaranteed correct or complete, so use at your own risk and try not to delete the Internet. -Stephan

Site Info

Privacy policy

Go to top