Differences from Browser to Browser

This one's probably not your fault. Unfortunately, no browser supports the standard specifications 100 percent. While most support virtually all of (X)HTML, their support of CSS varies. Firefox and Opera currently have the best support, followed by IE 7 and IE 6.

When your page looks different from one browser to the next:

• Test your page on as many browsers and platforms as you can. Read your server logs to see which browsers your visitors use and which browsers they don't so that you can make informed choices about which browsers to focus on.

• Be aware of which CSS properties are supported by current browsers and which are the most problematic. There are a number of good resources. For example, you might try the css-discuss Wiki (http://css-discuss.incutio.com/)

• Design your page so that even if something you use is not supported, your page still functions. This is called "degrading gracefully".

• Cater your page to your desired audience. Web designers can be expected to have all the latest plug-ins, members of the American Iguana Club might not.

Figure 22.24. Here is the CSS from the main example in the Forms chapter.

Figure 22.25. Firefox (shown) and other standards-loving browsers get it right.

Tip

• Check out The Web Standards Project page (www.webstandards.org) for more information on what you can do to promote the adoption of standards by the major Web browser manufacturers (as well as by any newcomers to the game).

Figure 22.26. Internet Explorer 6 doesn't support adjacent sibling selectors (see page 143) and so completely misses the highlighted code in Figure 22.24 above, resulting in 9em margins for all the input elements instead of just the first ones.