A Web developer's guide to the newest cross-browser compatibility issues - NetscapeWorld - August 1997

<HTML> <HEAD> <TITLE>A Web developer's guide to the newest cross-browser compatibility issues - NetscapeWorld - August 1997</TITLE> <META NAME="description" content="A Web developer's guide to the newest cross-browser compatibility issues -- NetscapeWorld, August 1997"> <META NAME="keywords" content="NetscapeWorld, Netscape, The Enterprise, Cascading Style Sheet, CSS1, ECMA, ECMAScript, DOM, Document Object Model, Microsoft, Netscape"> <META NAME="author" content="Shelley Powers"> </HEAD> </HEAD> <BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" ALINK="#FF0000" VLINK="#551A8B"> <BASE TARGET="_top"> <CENTER><A HREF="http://ad.preferences.com/click.ng;spacedesc=OracleDesigner_NetscapeED_468x60-RunOfSite_Any&time=2000.8.18.20.44.37"><IMG VSPACE="8" SRC="http://ad.preferences.com/image.ng;spacedesc=OracleDesigner_NetscapeED_468x60-RunOfSite_Any&time=2000.8.18.20.44.37" height="60" width="468" BORDER="0" ALT="Click Here for Oracle!"></A></CENTER> <center> <A HREF="http://ad.doubleclick.net/jump/idg.nw.com/homepage;sz=468x60"><IMG SRC="http://ad.doubleclick.net/ad/idg.nw.com/homepage;sz=468x60" border=0 height=60 width=468></A> </center> <IMG WIDTH="100%" HEIGHT="2" SRC="/netscapeworld/icons/red.gif">  <table cellpadding="5" border="0"> <tr> <td valign="CENTER">  <H1 ALIGN="CENTER"> A Web developer's guide to the newest cross-browser compatibility issues </H1> <H3 ALIGN="CENTER"> So you think ECMAScript, CSS1, and HTML 4 will solve your cross-browser problems? Wrong! </H3> <DIV ALIGN="CENTER"><EM>By Shelley Powers</EM></DIV> <table vspace="5" width="100%" cellpadding="5" border="1"> <tr> <td> <STRONG>Summary</STRONG><BR> Recently, ECMA released a standard scripting language definition, called ECMAScript, and the W3C released a recommendation for Web page presentation called Cascading Style Sheet (CSS1). The W3C has also issued a draft of the new HTML 4.0, in addition to a draft for CSS1 positioning authored by both Netscape and Microsoft. In the near future, standards for a scripting object model, (the Document Object Model), will also be presented. Microsoft and Netscape have both promised to support standards as they are released from these organizations. So does this mean you no longer have to worry about compatibility issues? The answer is a resounding No! Read more to find out why. (<EM>5,300 words, including extensive <a href="#resources">resources</a></EM>) </td> </tr> </table>  </TD> <TD WIDTH="137" VALIGN="TOP">  <center> <font size="+1" FACE="Arial, Helvetica, Sans-serif"><strong>NetscapeWorld</strong></font> <br> <font size="-1" FACE="Arial, Helvetica, Sans-serif">has become</font> <br> <a href="/index.html"><img vspace="0" border="0" width="107" height="58" src="/netscapeworld/ned-icons/ned-logo.107.stack.gif" alt="[Netscape Enterprise Developer Table of Contents]"></a> <br> <img vspace="5" border="0" width="107" height="2" src="/netscapeworld/icons/red.gif" alt=""> <br> <font size="-1" FACE="Arial, Helvetica, Sans-serif">August 1997</font> <br> </center> <font FACE="Arial, Helvetica, Sans-serif"> <a href="/netscapeworld/nw-08-1997/nw-08-toc.html"><img vspace="0" align="bottom" border="0" width="13" height="13" src="/netscapeworld/ned-icons/a-blue.gif" alt="[August 1997 Table of Contents]">Table of Contents</a> <br> <a href="/netscapeworld/common/nw.backissues.topical.html"><img vspace="0" border="0" width="13" height="13" src="/netscapeworld/ned-icons/a-blue.gif" alt="[Archives]">Topical Index</a> <br> <a href="/netscapeworld/search.html"><img vspace="0" border="0" width="13" height="13" src="/netscapeworld/ned-icons/a-blue.gif" alt="[Search]">Search</a> </font>  </TD> </TR> </TABLE>  <DL> <DD> <IMG ALIGN="LEFT" width="20" height="29" SRC="/netscapeworld/abcs/S.gif" ALT="S">everal otherwise reasonable people I know say the Web is easy and that <EM>anyone</EM> can deliver <EM>any</EM> content, and create <EM>any</EM> type of Web application. In my mind's eye I see these poor souls with little or no programming experience concocting a Java-based online commerce system. I see them explaining to the IS department that this system needs to be installed outside the company firewall on a machine also housing the company database. The IS people gape at them, stunned to silence. Finally, one of the IS staffers falls over, dead. <P> Joking aside, while most types of Web content can be created by people with enough time, some aspects of Web technology are very complex and not for the average person. Some applications are best left to the people paid the bucks to take the blame when a technology bursts into flames. <P> Lately, I've been haunted by a new apparition, thanks to the standards efforts in process and Netscape and Microsoft's promises to follow these standards. <P> Can people who are not experienced with application development and computer systems create most types of Web content? Definitely, yes! Can they create all of it? Emphatically, no! Can standards aid in creating Web pages that are compatible for browsers that say they adhere to these same standards? Yes. Can they ensure total compatibility? Oh, no, not even. <P> <HR NOSHADE> <font size="-2">Advertisement</font><br> <center> <A HREF="http://adforce.imgis.com/?adlink|9|6157|1|1|IMGIS" TARGET=_top><IMG SRC="http://adforce.imgis.com/?adserv|9|6157|1|1|IMGIS" BORDER=1 HEIGHT=60 WIDTH=468 NATURALSIZEFLAG=0 ALIGN=BOTTOM ALT="Netscape Network ad"></A> </center> <HR NOSHADE> <P> <DT> <FONT SIZE="+1"><STRONG>What are the standards?</STRONG></FONT> <DD> First, understand that Netscape and Microsoft want you to use their browser. This isn't an evil plot, or plan to subjugate the world on either of their parts. They are in business, and part of that business is to get you to use their browser. <P> Adhering to standards is as much a matter of marketing as it is a design philosophy. As an example, Netscape had the de facto standard for scripting Web pages with JavaScript. Microsoft began to challenge Netscape by gaining popularity for its browser, which uses JavaScript in addition to its own version of JavaScript, called <EM>JScript</EM>, and VBScript. So Netscape takes the approach to get its language defined as the formalized standard as well as the de facto standard. <P> Netscape could approach ISO as the organization to initiate this process, but ISO is not known for speed. Netscape approached ECMA, a European based standards organization primarily associated with media interface formats. Soon after, Microsoft joined the ECMA membership. Both pronounce their promise to adhere to whatever standard is produced by this organization. ECMA didn't know what hit it. <P> What is produced from this flurry of big corporate support is ECMA-262, also known as <EM>ECMAScript</EM>. Released in July 1997, ECMAScript is basically JavaScript 1.1 with the addition of some new or changed data types and support for Unicode. <P> That's one standard down. However, scripting is not the only issue with Web pages. Page presentation is not an aspect of HTML and because of this people have used some very creative techniques to format their pages. Among some of the tricks used are the 1-pixel blank GIF image and the use of tables for formatting output into columns and controlling the location of elements on a page. The problem with these tricks is that they don't quite work the same with all browsers and in all environments. <P> It was pretty obvious that some form of standard to control Web page presentation was needed, and the effort for the CSS1 standard was born. This standard provides a style sheet rule specification that determines how an element is displayed, and how multiple style definitions are to combine. It even to some extent provides patterns for user agents (browsers to most of us) to follow in meeting these standards. CSS1 was released as a recommendation in December of 1996. Again, both Microsoft and Netscape promise adherence to the standard, and implemented CSS1 in version 4.0 of their browsers. <P> Not long after the release of the CSS1 standard, Microsoft and Netscape also collaborated on creating a joint recommendation for CSS1 positioning. Though still a draft, both companies have implemented the static HTML positioning defined in the standard. Additionally, both companies have also exposed the positioning attributes within each of their scripting models, in order to dynamically position or hide elements after a page is displayed. <P> In July 1997, the W3C issued its draft specification for the eagerly awaited HTML 4.0. This release provides for more complex HTML tables, including the ability to group columns, the ability to group form elements, better support for international and accessibility implementations, and a host of other changes. The W3C sees the HTML 4.0 recommendation as a step towards that day when HTML becomes stable to the point that specification releases will no longer occur, or occur rarely. <P> HTML covers Web page syntax, scripting covers page processes, and CSS1 covers page presentation. What's missing is basically how this all ties together. To address this, the W3C began work on the Document Object Model (DOM) specification, and requirements for the model are currently at the W3C. Some think that this standard is the one that will literally pull the other standards together and finally ensure cross-platform compatibility. The object model would determine what the key objects are within a Web page, their exposure to dynamic alteration, and what properties, methods, and events they have. In addition, the model will also determine some of the relationships between the objects. <P> The assumption with all these standards is that you and I can finally write Web pages using the same style sheets, the same scripting language, accessing the same object model, and moving the elements dynamically in the same way and have them perform the same on Microsoft's Internet Explorer and Netscape Navigator. Is this assumption correct? No. <P> Taking each standard in turn I will demonstrate where incompatibilities exist between Navigator and IE, yet each browser meets the standard. I will also explain how this can happen. <P> <DT> <FONT SIZE="+1"><STRONG>CSS1</STRONG></FONT> <DD> CSS1 is an effective approach. It provides presentation information that will apply to one element, one page, or several pages. If the style is applied globally, changing it in one place also changes the element impacted by the style in all Web pages where the element occurs and where the style sheet is used. <P> I don't want to get into too much detail on CSS1 as I've covered this in an earlier article (see the <a href="#resources">resource</a> listing). A brief example of CSS1 follows. This script sets the margins and background of the page and sets the font size and color for the H1 headers. Additionally, the style sheet setting also loads a background image and sets it to repeat along the y-axis: <P> <DT> <PRE> <styletype="text/css"> 	BODY{ background-image: url(bar.gif); background-repeat: repeat-y; 		background-color: yellow; margin-left: 225px; 		margin-right: 0.5in; margin-top: 0.5in } 	H1 { font-size: 36pt; color: red } </STYLE> </PRE><DD> <P> This script will produce a Web page with a yellow background, with the header set to 36pt and red, a background image that repeats along the y-axis, and the other margins set to one-half inch. In this case the CSS1 standard has assisted in delivering content that appears relatively the same with both IE and Navigator. <P> However, what if I add a border to the paragraph element, and also set the white space within the paragraphs to display the same as a preformatted element, meaning that white space is not collapsed: <P> <DT> <PRE> <styletype="text/css"> 	BODY{ background-image: url(bar.gif); background-repeat: repeat-y; 		background-color: yellow; margin-left: 225px; 		margin-right: 0.5in; margin-top: 0.5in } 	H1 { font-size: 36pt; color: red } 	P{ border-width: 5; border-color: lime; 		background-color: white; 		border-style:groove; padding: 10; 		white-space: pre } </STYLE> </PRE><DD> <P> <A NAME="1" HREF="/netscapeworld/nw-08-1997/Cross/figure1.jpg">Figure 1</A> shows a sample page with the above style sheet setting, viewed from IE 4.0, PP2, and <A NAME="2" HREF="/netscapeworld/nw-08-1997/Cross/figure2.jpg">Figure 2</A> shows the same page viewed from Navigator 4.01. There are noticeable differences in the display of the paragraph. Note, however, that both browsers are in total compliance with the CSS1 specification with their interpretation of the style sheet rules. How can this be when the display is so different? <P> The differences in the display between the two browsers, which you can check out yourself from the <A NAME="3" HREF="/netscapeworld/nw-08-1997/Cross/css1.htm">example</A>, has to do with conformance to core or level 1 CSS1, and to their own personal interpretation of information that is not specified in detail in the standard. As an example, the <EM>white-space</EM>style sheet setting does not have to be implemented by the browser as, according to the core CSS1 standard, this can be ignored in favor of the browser's default handling of white space. <P> Also, the IE interpretation of the border sets it all the way to the right margin, though the actual paragraph contents end sooner than the margin. Netscape's interpretation sets the border around the contents, not to the margin. Navigator also spaces the content away from the table border while IE places the content right up to the border. Is either browser's interpretation incorrect? Nope. Within the parameters set by the CSS1 standard, the implementation and interpretation of these standards are left up to the user agent unless specifically detailed within the standard. <P> Both implementation and interpretation of a standard can lead to differences. <P> <DT> <FONT SIZE="+1"><STRONG>CSS1 Positioning</STRONG></FONT> <DD> Netscape's Scott Thurman and Microsoft's Scott Isaacs co-wrote CSS1. You might expect Navigator and IE compatibility here. Wrong! <P> This recommendation provides a standard to follow when statically positioning HTML elements (not included in CSS1). Scripting languages build on this foundation and make it possible to conditionally set or dynamically change the visibility, display, and positioning of an element after the page has been displayed. (Thanks to Erik Krock, Netscape technology evangelist, for this clarification). <P> Both IE and Netscape follow the draft recommendation, exactly, when placing elements statically. As an example, both will position the following block at the exact same position within the Web page: <P> <DT> <PRE> <DIV style="position: absolute; left:20; top:20; width:300; height: 200; visibility:hidden"> </DIV> </PRE><DD> <P> Where the companies differ is when CSS1 positioning is applied dynamically. As stated in an earlier section, standard specifications don't provide for details of implementation. Microsoft and Netscape both dynamically implement this positioning standard, yet each company uses a different approach. <P> Examining each of their approaches, again using a DIV block, Netscape exposes this element within a page by ownership and then identifier. Based on the fact that the web page document owns the content within the page, this means that you can access a DIV object identified by "test", with the following code: <P> <DT> <PRE> document.test </PRE> <DD> <P> First, however, you have to define a style sheet for this object. To use dynamic positioning, the style sheet for the <CODE>DIV</CODE> object must use <EM>absolute</EM> positioning, which places an object at a specific location, rather than within within the natural flow of the document. You can use a global style sheet setting or a specific inline style setting to position the element. As an example, the following uses an inline style sheet setting to position the <CODE>DIV</CODE> block with its upper-left corner 100 units from the top of the Web page document, and 100 units from the left side of the page: <P> <DT> <PRE> <DIV id="test" style="position:absolute; left:100; top:100"> Some content </DIV> </PRE><DD> <P> Now, to dynamically move the object within a script block, you can set a new value for the <EM>left</EM> property, the <EM>top</EM> property, or both: <P> <DT> <PRE> document.test.left = 50; document.test.top = 50; </PRE><DD> <P> In addition to moving the object, you can also clip it, hide it, or turn off its display. <P> Microsoft supports the same positioning concepts, but uses a slightly different implementation strategy. They have created a <EM>style</EM> object/property that is attached to each of the HTML elements, and all CSS1 attribute changes are made to this object rather than directly to the element itself. Also, Microsoft exposes the object to coding differently. There are several different ways to access a specific object. You can access it directly by its identifier, or you can access it by its relationship to the <EM>all</EM> collection, which is a collection of all elements within a Web page. The same code to accomplish the movement of an element called "test" for IE would be: <P> <DT> <PRE> document.all.test.style.left = 50; document.all.test.style.top = 50; </PRE><DD> <P> Or you could use the following: <P> <DT> <PRE> document.all.items("test").style.left = 50; document.all.items("test").style.top = 50; </PRE><DD> <P> Or even the following: <P> <DT> <PRE> test.style.left=50; test.style.top=50; </PRE><DD> <P> As you can see, regardless of which approach you use with IE, it still won't be compatible with Navigator. Yet, both browsers are complying with the standard as it is currently documented. Except in this case, in addition to differences in implementation, the browsers also differ in their scripting object models. <P> This isn't to say you can't work around this difference. The following is a simple workaround for the existence of the <EM>style</EM> property: <P> <DT> <PRE> //navigator only - use JavaScript1.2 as script block language function object(obj) { this.style = obj; } theobject = new object(document.theelement); //ie only - use jscript as script block language theobject = document.all.theelement; //both, use javascript as language theobject.style.left= 50; theobject.style.top= 50; </PRE><DD> <P> The <EM>object</EM> function can be created in a separate file and linked in. A separate function is used to instantiate <EM>theobject</EM>. From that point on the new object can be used in elsewhere without having to differentiate the type of browser. <P> These objects can be extended to cover all details of positioning, including clipping. The details of creating what I call DHTML <EM>equalizer</EM> objects will be covered in more detail at a later time, but see this code in action with an <A NAME="5" HREF="/netscapeworld/nw-08-1997/Cross/present.htm"> example from my Web site</A>. <P> <DT> <FONT SIZE="+1"><STRONG>HTML 4.0</STRONG></FONT> <DD> Hypertext Markup Language (HTML) is the basic component of every Web page. You can have a perfectly good Web page without using CSS1, or JavaScript, or without using Dynamic HTML techniques. HTML on the other hand is essential. <P> The new HTML 4.0 draft has many very good extensions, not the least of which is increased ease of use for international Web pages, such as which way a Web page reads and which language is being used, as well as issues of accessibility for those who are physically challenged. <P> There are, however, many areas of confusion within the draft, which definitely opens the door for incompatibilities. And, unlike scripting, incompatible HTML blocks can't be hidden as easily. <P> As an example, <CODE>BLOCKQUOTE</CODE>s are HTML elements that reference a message or source document. There is absolutely no specification about how the user agent renders these. As the specification states, generally the UA will indent the enclosed text. The specification provides an interesting but rather confusing comment that style sheets should provide a mechanism to surround the blocks with quotes, but not to do this by default, and not if the Web page author already has placed quotes. But, this isn't part of the actual specification it's only a suggestion. Okay, I'm sure most UAs won't have problems implementing this consistently. <P> Actually, very little of the specification determines how elements are actually displayed because HTML can be used in many different environments, from hand-held pocket computers, to speech synthesizers, to 21-inch monitors. I respect this, and understand why this is so. With the addition of style sheets the page author can then apply whatever presentation style they wish based on how they understand the page is being viewed. <P> However, the HTML specification in essence violates its own presentation neutrality by providing presentation specifications. Examples of this are the <EM>frames</EM> and <EM>rules</EM> attribute for the <CODE>TABLE</CODE> element. These <EM>new</EM>attributes determine how the table is framed and whether rules will appear between columns, rows, column or row groups, or everything. Enter conflict, because you can also control borders of tables, table rows, and table cells with global style sheets. So what happens if I use a global style sheet setting in combination with these HTML attributes as shown next: <P> <DT> <PRE> <HTML> <HEAD> <STYLEtype="text/css"> 	TABLE{ border-width: 5; border-style: groove; border-color: lime } 	TD { border-width: 0 } </STYLE> </HEAD> <BODY> <TABLEframe="vsides" cols="rules"> <TR><TD>cell one</td><td>cell two</td></tr> <TR><TD>cellthree</td><td>cell four</td></tr> </table> </BODY> </HTML> </PRE><DD> <P> The result of this Web <A NAME="6" HREF="/netscapeworld/nw-08-1997/Cross/html.htm">page</A> as displayed in IE 4.0 (which follows the HTML 4.0 draft specification) is shown in <A NAME="7" HREF="/netscapeworld/nw-08-1997/Cross/figure3.jpg">Figure 3</A>, and <A NAME="8" HREF="/netscapeworld/nw-08-1997/Cross/figure4.jpg">Figure 4</A> shows the same page but without the style sheet setting. The global style sheet overruled the locally defined table specification or else it overlaid it, a result I wouldn't have expected, and a potential area of confusion for Web page authors. <P> <DT> <FONT SIZE="+1"><STRONG>The Document Object Model</STRONG></FONT> <DD> The Document Object Model (DOM) is, at this time, nothing more than a list of requirements. Be wary of any company that claims adherence to the DOM, as requirements are nothing more than start points, without form or substance. <P> The DOM is going to be the area that truly defines what a browser can or cannot do, particularly with interactivity in a Web page. <P> What is an object model? If you consider that any element delimited by a tag within a Web page is an <EM>object</EM>, then the model specifies what properties of the object can be accessed and altered, what events can be trapped for the object, what built-in methods can be used with the object, and how it relates to all other objects within the page. <P> As an example, if a header delimited with <CODE><H1></H1></CODE> tags is considered an object, the DOM working group can specify that this header object generate events such as <EM>click</EM> or <EM>mouseover</EM> based on Web page reader actions. From this, you can trap these events within script and add behavior to the page based on the combination of event and object. If the DOM working group specifies that the CSS1 style sheet attributes for a header object are exposed in the model, you can then change the color of the text, the font-size, or even remove the header from the page, as a response to some event. When you consider this, you begin to see how powerful something like the DOM specification will be. <P> The lack of a standard object model has been felt in previous releases of IE and Navigator. As an example, when Netscape released Navigator 3.0, it exposed images (delimited by <CODE><IMG></CODE>) to their scripting object model as the <EM>images</EM> array. IE 3.0 supported the Netscape JavaScript 1.1 <EM>language</EM> but not the Netscape scripting object model. Unfortunately, there was confusion about the division between scripting language and scripting object model. Because of this the JavaScript Usenet group received hundreds of queries as to whether IE truly supported JavaScript 1.1, comments that the IE implementation was broke, and questions as to why won't some script that alters the image dynamically work with IE 3.0. <P> <DT> <FONT SIZE="+1"><STRONG>Dealing with overlapping & conflicting standards</STRONG></FONT> <DD> When multiple organizations and multiple groups within the same organization are supplying standards, there is a real potential problem with overlap between the groups, which can cause confusion or outright conflicts. <P> As an example, the HTML 4.0 working draft has listed what's called "intrinsic events" for most HTML elements. These are events such as <EM>onmousedown</EM> or <EM>onmouseover</EM>. Yet the question has to be asked, are events a component of HTML or are they components of the DOM? If the DOM lists events other than those listed with the HTML specification does that mean that a browser that supports the events within the DOM standard is no longer in compliance with the HTML standard? <P> As another example, the HTML 4.0 specification also lists a new element called the <CODE>BUTTON</CODE> element. This element acts as a container, meaning that you can create a button-like object that is made up of images, text, headers, or any other HTML content. The main purpose for this element is to provide a button down appearance when the web page reader clicks on the element. <P> However, can't you create this same object using the CSS1 <EM>border</EM> style sheet attributes? Then, if DOM allows us to trap events for a class of objects, you can create a button object that has the inherited ability to display one style of border when it receives a mouse down event or when the object is first loaded, and one style of border when it receives a mouse up event. Encapsulating this object within an external-scripting file you can distribute it for reuse. Inheriting from this object you can extend the mouse down event to also trigger another script. The Web page developer using the object would get all this functionality simply by including the reference to the scripting file within their web page, and supplying a class name of "button" to a <CODE>DIV</CODE> block, an image, or any other HTML element. <P> Not only will this approach prevent the introduction of unnecessary elements to standard HTML, it also provides a means to create reusable components that can be used many times, inherited from, and extended. <P> For this approach to work, the different standards organizations need to be very careful of overlap and should work together to ensure that each working organization provides specifications for those components of the Web page it should control, and only those components. <P> <DT> <FONT SIZE="+1"><STRONG>So what's a poor Web developer to do? Follow a 12-step plan</STRONG></FONT> <DD> I don't know about all of you, but sometimes when I consider all of this I want to borrow a line from a favorite movie, "Network", and stand up at the next Internet-based conference and yell at the top of my lungs, "I'm mad as hell and I'm not going to take it anymore!" <P> Developers are more likely to have compatibility across vendor implementations of an application if one vendor dominates the market and their implementation becomes the de facto standard, rather than being derived from a specification released by a non-profit standards organization. The only exception to this is for standards that are machine-specific, such as the DVD format, and even then the implementation of one vendor probably acted as a seed to the standard. Microsoft has what is the dominant user interface operating system, Windows, with the Mac being a secondary standard. Based on this, you have a plethora of products compatible with one or the other or both. A GUI derived from a standards committee would never have this same impact. <P> How can you cope with all these standards, and the others I didn't mention such as Extended Markup Language (XML)? Especially in light of the fact that they are no guarantee to browser compatibility? <P> One approach is to hire someone else, and pay him or her the bucks to take the blame when your Web site breaks. Or, you can freeze your Web pages at the level of technology supported by Navigator 3.0 and IE 3.x. This means that your Web pages will support basically the core functionality of the standards groups, and should be viewable by most browsers, as well as not breaking with future releases of these same browsers. This also means your pages won't be able to take advantage of many of the new features, such as Dynamic HTML, and the enhanced table and form support of HTML 4.0, and so on. <P> Another approach is that you can use a Web development tool and rely on it to be aware of what the different browsers' support. You won't have as much control over what your pages can do and you may not be able to create some of the more complex page presentations, but you probably will be able to take advantage of some of the newer functionality. Don't forget to test the pages with all your target browsers, though. <P> You can create the content directly, yourself. With this approach, start small and test at every step. I recommend contructing a Web page using the following 12 steps: <P> <OL> <LI>Create the outline for the content, including small sentences to act as "stubs" for the real content later. <P> <LI>Test with all target browsers. <P> <LI>Add in the style sheet rules, one at a time, directly into the first web page document. This also includes any positioning style sheets. <P> <LI>Test with all target browsers after each rule. <P> <LI>Once the style sheet rules have been refined, consider cutting them out of test document and placing into a separate file for use in all Web pages. <P> <LI>Add in the rest of the content. <P> <LI>Begin adding active content by coding in all the non-dynamic HTML scripts. These are scripts that don't alter appearance of HTML elements, move them, hide them, or display them. <P> <LI>Test for each browser after coding each function or event. Handle any incompatibilities. If something doesn't work between browsers, decide if functionality is worth the time to fix. If not, drop the functionality. <P> <LI>Add dynamic HTML. You might consider coding Navigator components in one file, IE in another. <P> <LI>Test for each browser. <P> <LI>If something doesn't work for both browsers, decide if the effect is worth the time to fix. If not, drop the effect. <P> <LI>Look for code, packages, and samples that implement what you want and learn from them. Look for sites that support both browsers. The Internet is full of sites that provide documentation, help, and actual samples. The Resource list below lists many.</LI></OL> <P> There are approaches to take to create content for both browsers and I have discussed them in earlier articles, and will continue to discuss them in the future. Be prepared for frustration at times, and remember my second rule of Web development: if something doesn't work, find what does, and make it work for you. My main rule? If you aren't having fun, take a break, walk away, and then try again. <IMG HEIGHT="8" WIDTH="8" SRC="/netscapeworld/icons/dingbat.gif">  </DL> <P> <P> <HR> <P> <A NAME="resources"><STRONG>Resources</STRONG></A> <UL> </UL> <strong>The Browsers</strong> <UL> <li><a href="http://www.microsoft.com/ie/ie40/">Microsoft's Internet Explorer 4.0</a> The main web page for Internet Explorer 4.0. http://www.microsoft.com/ie/ie40/ <li><a href="http://home.netscape.com/comprod/products/communicator/">Netscape Communicator Page</a> The main web page for Netscape Communicator, including Navigator 4.0. http://home.netscape.com/comprod/products/communicator/ </UL> <p><strong>The Standards</strong> <UL> <LI><a href="http://www.w3.org/pub/WWW/TR/REC-CSS1"> Cascading Style Sheets, level 1</a> http://www.w3.org/pub/WWW/TR/REC-CSS1 <LI><A HREF="http://www.w3.org/pub/WWW/TR/WD-style"> HTML and Style Sheets</a> W3C Working Draft</a> http://www.w3.org/pub/WWW/TR/WD-style <LI><A HREF="http://www.w3.org/pub/WWW/TR/WD-positioning">Positioning HTML Elements with Cascading Style Sheets</a> W3C Working Draft http://www.w3.org/pub/WWW/TR/WD-positioning <LI><A HREF="http://www.w3.org/pub/WWW/TR/WD-forms"> Enhancing Interactive HTML documents</a> http://www.w3.org/pub/WWW/TR/WD-forms <LI><a href="http://www.ecma.ch/">The ECMA Information Center</a> Home of the ECMAScript Standard. http://www.ecma.ch/ <LI><a href="http://www.ecma.ch/stand/ecma-262.htm">ECMA-262</a> The ECMAScript Standard. http://www.ecma.ch/stand/ecma-262.htm</UL> <p><strong>Browser Documentation Pages</strong> <UL> <li><a href="http://developer.netscape.com/one/dynhtml/index.html">Netscape One Dynamic HTML</a> Dynamic HTML Developer Central. http://developer.netscape.com/one/dynhtml/index.html <li><a href="http://developer.netscape.com/library/documentation/communicator/dynhtml/index.htm">Dynamic HTML in Netscape Communicator http://developer.netscape.com/library/documentation/communicator/dynhtml/index.htm <li><a href="http://home.netscape.com/eng/mozilla/3.0/handbook/javascript/index.html">Netscape's JavaScript Guide</a> The JavaScript Programming Guide - for Navigator 3.x. http://home.netscape.com/eng/mozilla/3.0/handbook/javascript/index.html <li><a href="http://developer.netscape.com/library/documentation/communicator/jsguide/contents.htm">What's new in JavaScript for Navigator 4.0</a> All the new goodies including JSS and LAYERS. http://developer.netscape.com/library/documentation/communicator/jsguide/contents.htm <LI><A HREF="http://developer.netscape.com/library/documentation/communicator/layers/index.htm">Positioning HTML Elements</A> http://developer.netscape.com/library/documentation/communicator/layers/index.htm <LI><a href="http://developer.netscape.com/library/documentation/communicator/dynhtml/layers31.htm">Dynamically Positioning HTML Layers</a> http://developer.netscape.com/library/documentation/communicator/dynhtml/layers31.htm <LI><A HREF="http://developer.netscape.com/library/documentation/communicator/dynhtml/jss31.htm">Introduction to Style Sheets</A> http://developer.netscape.com/library/documentation/communicator/dynhtml/jss31.htm <LI><a href="http://developer.netscape.com/library/documentation/communicator/dynhtml/webfont4.htm">Dynamic Fonts</a> http://developer.netscape.com/library/documentation/communicator/dynhtml/webfont4.htm <li><a href="http://www.microsoft.com/ie/authors/">Microsoft IE 4.0</a> The main web page for web authors and developers. http://www.microsoft.com/ie/authors/ <li><a href="http://www.microsoft.com/workshop/author/dhtml/">Microsoft Dynamic HTML</a> The introduction page for Microsoft's Dynamic HTML. http://www.microsoft.com/workshop/author/dhtml/ <li><a href="http://www.microsoft.com/sitebuilder/">Microsoft SiteBuilder Network</a> The Microsoft SiteBuilder Network. http://www.microsoft.com/sitebuilder/ <li><a href="http://www.microsoft.com/vbscript/">Microsoft's VBScript page</a> Where to start to find out information about VBScript. http://www.microsoft.com/vbscript/ <li><a href="http://www.microsoft.com/jscript/">Microsoft's JScript page</a> Where to find out information about JSCript. http://www.microsoft.com/jscript/ <LI><a href="http://www.microsoft.com/workshop/author/dynhtml/dhtm0270.htm">Scripting for Internet Explorer</a> http://www.microsoft.com/workshop/author/dynhtml/dhtm0270.htm</UL> <p><strong>Other Resources</strong> <UL> <LI><A HREF="http://developer.netscape.com/library/documentation/communicator/dynhtml/jss34.htm">Style Sheet Reference</A> http://developer.netscape.com/library/documentation/communicator/dynhtml/jss34.htm <LI><a href="/netscapeworld/common/nw.jumps.html#javascript">Official JavaScript Resources from our Technical Resources page</a> http://www.netscapeworld.com/netscapeworld/common/nw.jumps.html#javascript <LI><a href="/netscapeworld/common/nw.jumps.html#unjavascript">Unofficial JavaScript Resources from our Technical Resources page</a> http://www.netscapeworld.com/netscapeworld/common/nw.jumps.html#unjavascript <LI><a href="/netscapeworld/common/nw.jumps.html#jsres">JScript and JavaScript bug reports and workarounds from our Technical Resources page</a> http://www.netscapeworld.com/netscapeworld/common/nw.jumps.html#jsres <LI><a href="http://www.developer.com/">The Gamelan Developer Site</a> Not just for Java, this site also features Dynamic HTML and scripting examples. http://www.developer.com/ <li><a href="http://www.yasd.com/samples">The Author's Samples site</a> Featuring samples of Java, Scripting, and Dynamic HTML. http://www.yasd.com/samples <li><a href="http://www.htmlhelp.com/reference/css/">Web Design Group's CSS page</a> http://www.htmlhelp.com/reference/css/ <LI><A HREF="http://www.hexmac.com">Hexmac Software System</A>: enables <code>LAYERS</code> in Macintosh computers! Has Win95 version too http://www.hexmac.com <li><a href="http://www.yahoo.com/Computers_and_Internet/Programming_Languages/JavaScript/">The Yahoo JavaScript Web page</a> A page full of JavaScript links, from Yahoo. http://www.yahoo.com/Computers_and_Internet/Programming_Languages/JavaScript/ <li><a href="http://www.yahoo.com/Computers_and_Internet/Information_and_Documentation/Data_Formats/HTML/">The Yahoo HTML Web Page</a> A page full of HTML links, from Yahoo. http://www.yahoo.com/Computers_and_Internet/Information_and_Documentation/Data_Formats/HTML/</UL> <p><strong>Author's Previous Articles on this Technology</strong> <UL><li><a href="http://www.javacats.com/us/articles/Jsart.html">"Netscape Navigator's JavaScript 1.1 vs Microsoft Internet Explorer's JScript"</a> Compares Netscape's JavaScript 1.1 and Microsoft's JScript. Offers tips on writing JavaScript that works with both browsers. http://www.javacats.com/us/articles/Jsart.html <li><a href="/netscapeworld/nw-06-1997/nw-06-animated.html">"Using Dynamic HTML to create an animated Navigation bar"</a> in the June 1997 issue of NetscapeWorld. http://www.netscapeworld.com/netscapeworld/nw-06-1997/nw-06-animated.html <li><a href="/netscapeworld/nw-05-1997/nw-05-dynamic.html">"Adding Dynamic Content for Multiple Browsers and Versions"</a> in the May issue of NetscapeWorld. http://www.netscapeworld.com/netscapeworld/nw-05-1997/nw-05-dynamic.html <li><a href="/netscapeworld/nw-04-1997/nw-04-css.html">"Getting Started with Cascading Style Sheets"</a>, in the April 1997 issue of NetscapeWorld. http://www.netscapeworld.com/netscapeworld/nw-04-1997/nw-04-css.html <li><a href="/netscapeworld/nw-03-1997/nw-03-coin.html">"Writing Pages that look great in Navigator and IE"</a> in the March 1997 issue of NetscapeWorld. http://www.netscapeworld.com/netscapeworld/nw-03-1997/nw-03-coin.html </UL> <HR> <P> <STRONG>About the author</STRONG><BR> Shelley Powers is an author and has her own Web development/consulting company, YASD, located in Vermont. YASD's URLs are <A HREF="http://www.yasd.com/">http://www.yasd.com</A> and <A HREF="http://www.dynamicearth.com/">http://www.dynamicearth.com</A>. <P> She has co-authored and contributed chapters to books on Java, Powerbuilder 5.0, JavaScript, Perl, and CGI, in addition to writing for NetscapeWorld and other online magazines. She is finishing a book on cross-browser Dynamic HTML for IDG Books Worldwide. Reach Shelley at <A NAME="author" HREF="/cgi-bin/ned-mailto.cgi?shelley.powers@netscapeworld.com+/netscapeworld/nw-08-1997/nw-08-crossbrowser.html+author">shelley.powers@netscapeworld.com</a>. <a href="http://popularhyip.com">HYIP Monitor</a></BODY>   </HTML>