CSS tutorial - Browser problems


Skip navigation.

Site search

Site navigation

CSS tutorial


Other tutorials

Browser problems

Browsers support varying amounts of CSS. Support generally increases as new versions are released. Most intentionally implement various bugs (known as quirks) when the Web page triggers quirks mode (depending on the doctype - see my HTML tutorial for details). This is designed to cope with unmaintained legacy content on the Web. You should ensure that your page triggers standards mode to get the most reliable CSS response.

For old browsers, most CSS problems are noticed in Netscape 4. I have found a site that fully documents every bug that Netscape 4 has with stylesheets. It is a very long read. I recommend that you ignore Netscape 4 completely, and style for newer browsers instead (Netscape itself is now using version 9). If you need to ensure that Netscape 4 can still view your pages (you don't), it is best to simply put all of your styles in another external file, and use the @import rule to import it, since Netscape 4 cannot import. Netscape 4 will show an unstyled page.

Out of all the current browsers, Internet Explorer's support is generally the worst. Widely used versions are missing many parts of CSS, and can be very difficult to design for. Most sites will need to cater for older versions of Internet Explorer (the Windows version, at least - the discontinued Mac version is very different, with very different problems). This means restricting styles to CSS 1, and the basics of CSS 2 positioning. If you want to use more advanced styles, you need to make sure that these are purely decorative, and the style still works in Internet Explorer versions that do not support them.

In general, the best way to write is using a browser with a high level of CSS support to check your CSS, then after you have something that works nicely, work out what you will have to change to make it work in versions of Internet Explorer that you still need to cater for. For development, I recommend testing in at least Opera, Mozilla/Firefox and Safari/Chrome (all are available on all major platforms). If you have access to it, you should also test in Konqueror, or some other browser based on the KHTML engine. It will have differences from the related Safari WebKit engine.

Remember that there is usually more than one way to achieve what you need, such as being able to use both float and position to do columns (you can also use display:table; in most browsers, but not Internet Explorer 7-). If it helps, I have written an article on how Internet Explorer causes problems, which includes workarounds for some of the more common problems.

Last modified: 19 March 2011

  1. Previous
  2. Next
This site was created by Mark "Tarquin" Wilton-Jones.
Don't click this link unless you want to be banned from our site.