Common Problem Areas | Dynamic HTML in Action

There are literally thousands of areas in which browser differences can (and will) trip up Web developers. This section tries to address some of the most common problems.

BODY and FRAMESET on the Same Page

The HTML 4.0 specification limits a document to having a FRAMESET or a BODY element, but not both (unless the BODY element is contained in a NOFRAMES element for browsers that do not support frames). Internet Explorer supported both in the same document prior to version 4, at which point this support was removed. If both appear in the same document, the second is ignored. You can also accidentally imply a BODY element by using elements that are only valid within a BODY element (such as IMG and TABLE).

Cascading Style Sheets Differences

Unfortunately, the implementation of Cascading Style Sheets (CSS) varies widely from browser to browser. Internet Explorer 3 is particularly problematic. This browser was released prior to the final release of the CSS Level 1 specification. As such, it unavoidably implemented certain features in a different way than was decided upon in the ultimate release of the specification. For example, the em unit of measurement is not supported and might be treated as px. Also, setting a percentage font size for an element changes it based on its default size, rather than the size of its parent. Another example is that Netscape Navigator 4, Internet Explorer 3, and Internet Explorer 4 all implement CSS inheritance in different ways. Support for shorthand attributes is spotty in Internet Explorer 3 and Navigator 4, and some features are simply implemented differently.

Frequently, the best solution for this problem is to use separate style sheets for each browser, as demonstrated earlier in this chapter in the section on browser detection. A variant on this technique is to use a single style sheet in all browsers to handle the core CSS attributes (text color, size, and so on) that migrate well among browsers, and then use a second, specific style sheet for each browser. Another technique (which is most valuable if you are targeting only different versions of Internet Explorer) is to take advantage of the fact that Internet Explorer 3 does not support multiple style sheets or the DISABLED attribute, both of which are supported in Internet Explorer 4, as follows:

 <!--Used in Internet Explorer 4 and later, not in version 3--> <STYLE>   span {color:red} </STYLE> <!--Used in Internet Explorer 3, but         disabled in version 4 and later--> <STYLE DISABLED>   span {font-size:20pt} </STYLE>

This technique is not as useful when targeting Navigator. Navigator 4 supports multiple style sheets, but not the DISABLED attribute. Thus, Navigator uses both of the style sheets, Internet Explorer 4 and later use only the first, and Internet Explorer 3 uses only the second.

Inconsistent Object Model

Object Model support varies substantially from browser to browser. For example, Netscape Navigator does not support event bubbling in the same way as Internet Explorer. Scott Isaacs, a Microsoft developer and author, has created a tool called DHTMLLib that is designed to overcome some of these differences by approximating an Internet Explorer Object Model inside Navigator. This tool is available from www.insidedhtml.com/writeOnce/writeOnce.asp.

Background Window Color

Internet Explorer versions 3 and earlier and all current versions of Netscape Navigator use gray as the default background color of the page, while Internet Explorer versions 4 and later use white. If you want to explicitly set the color of the page and are concerned about version 3 and earlier browsers, use the BGCOLOR attribute of the <BODY> tag, as follows.

 <BODY BGCOLOR="white" TEXT="black">

When setting an explicit background color, it is important to also set a default text color to ensure that your background color will not conflict with the foreground text color. If you are only concerned with version 4 and later browsers, you can explicitly set the colors through CSS with the background-color and color CSS attributes on the BODY element.

Differences in Script Support

Scripting languages have evolved substantially in the past few years. Some new features are not supported in older browsers. One very useful technique is to do your primary development on the oldest supported browser. Since features tend to be forward compatible, your scripts are much more likely to work when used in a more recent browser than in an older one. Additionally, Internet Explorer 3 and later can be upgraded to more recent versions of the JScript engine. You might want to put links on your pages to the most recent script engines, available from msdn.microsoft.com/scripting, so that your users can upgrade.

Different Degrees of Flexibility in HTML Interpretation

It is common to find Web pages that do not strictly conform to HTML standards. For example, the following is invalid HTML.

 <P> <H1>Heading</H1> </P>

According to the HTML specification, block-level elements such as H1 are not permitted inside a P element, thus the P element actually ends at the beginning of the H1 and the </P> is superfluous. When Netscape Navigator interprets the above code, styles placed on the BODY element might be lost after the closing </P>. Another common example is that Netscape Navigator 4 might not properly display a table that is missing the closing </TABLE> tag. The best way to avoid this sort of problem is to validate your HTML before you publish it to the Web.

These are just some of the problems you might run into when creating cross browser content for the Web. Luckily, there are many Web sites devoted to the art of Web development. Several highly recommended sites include webreview.com, webreference.com, developer.netscape.com, msdn.microsoft.com, microsoft.com/sitebuilder, and www.w3.org.