Platinum Edition Using HTML 4, XML, and Java 1.2:Cross-Browser Dynamic HTML

To access the contents, click the chapter and section titles.

Platinum Edition Using HTML 4, XML, and Java 1.2
(Publisher: Macmillan Computer Publishing)
Author(s): Eric Ladd
ISBN: 078971759x
Publication Date: 11/01/98

Table of Contents

To get consistent behavior, you can do one of two things. First, to force each browser to only put the background color behind the text, enclose the <P> container within a <SPAN>, and apply the STYLE attribute to the <SPAN>, as in

<SPAN STYLE=“background-color:yellow”><P>Welcome!!!</P></SPAN>

To force the background color to the left margin in each browser, use a 1×1 table with width at 100%, as in

<P><TABLE WIDTH=“100%” CELLSPACING=0 CELLPADDING=0>
   <TR><TD BGCOLOR=“yellow”>Welcome!!!</TD</TR></TABLE></P>

Figures 27.5 and 27.6 show these three possibilities in each browser.

Listing 27.1 BGround.htm—Results Vary in Different Browsers, but Workarounds Bring Uniformity

<HTML>
<HEAD>
<TITLE>Background Colors</TITLE>
</HEAD>
<BODY>
<H1>Background Colors</H1>
<HR>
<P STYLE=“background-color:yellow”>Welcome!!!</P>
<HR>
<SPAN STYLE=“background-color:yellow”><P>Welcome!!!</P></SPAN>
<HR>
<P><TABLE WIDTH=“100%” CELLSPACING=0 CELLPADDING=0>
   <TR><TD BGCOLOR=“yellow”>Welcome!!!</TD</TR></TABLE></P>
<HR>
<ADDRESS>
Jim O’Donnell, <A HREF=“mailto:odonnj@rpi.edu”>odonnj@rpi.edu</A>
</ADDRESS>
</HTML>

FIGURE 27.5 Even when both browsers support a standard, as with CSS1, subtle differences still exist between them.

FIGURE 27.6 Sometimes achieving cross-browser compatibility requires the application of a few workarounds.

Style Sheet Positioning

The Cascading Style Sheets Positioning (CSSP) specification is also supported by both Netscape Navigator and Microsoft Internet Explorer. Like the CSS1 style sheet formatting properties, whenever you want to be able to dynamically change the position of HTML elements using CSSP, you need to go through the browser Document Object Model. Of course, it is different for each browser.

To simplify the process of creating Web pages that use style sheet positioning and are compatible on both Netscape Navigator and Microsoft Internet Explorer, you can download and use a variety of freely available JavaScript libraries. As mentioned previously in this section, a CBDHTML library has been included in the CD-ROM that accompanies this book.

Cross-Browser Dynamic HTML Library Functions

In this section, we will give a description of the major functions that are included in the cbdhtml.js library. You will also see the code that is used to implement a few of them so that you can get a feel for the techniques used. In the next section, you will see some examples of what they can do in action.

You will notice that, rather than using the same techniques as the Ultimate JavaScript Client Sniffer to detect what browser type is being used, the functions in this library usually rely on checking for the existence of the document.layers or document.all object. The document.layers object only exists in Netscape Navigator versions 4 and higher, and the document.all object only exists in Microsoft Internet Explorer versions 4 and higher.

The functions included in the Cross-Browser Dynamic HTML library include the following:

• createLayer—This function enables you to create a layer for either browser. In the Cross-Browser Dynamic HTML library, the term layer is used to refer to a created object that can be used in either browser to display and animate content and information, not just to refer to Netscape’s proprietary <LAYER> tag and layer object. This function, shown in Listing 27.2, creates a layer of content using the document.writeln method and either the <LAYER> or <DIV> tag, depending on whether the client browser is Navigator or Internet Explorer.

Table of Contents

Products | Contact Us | About Us | Privacy | Ad Info | Home

Use of this site is subject to certain Terms & Conditions, Copyright © 1996-2000 EarthWeb Inc.
All rights reserved. Reproduction whole or in part in any form or medium without express written permission of EarthWeb is prohibited. Read EarthWeb's privacy statement.