JavaScripting Netscape 6: No More Sloppy Code | 3 | WebReference

JavaScripting Netscape 6: No More Sloppy Code | 3

111456
[previous] [next]

HTML Tips and Tricks

NS6 and Nested HTML Tags

The Problem

Improperly nested tags can cause NS6 to hang and not fire an onload event:

<TABLE>
    <TR><TD>
        <form action="https://www.domain.com/cgi-bin/subscribe.cgi" method="post">
        <input name="email" size=10 value="your e-mail">
        <input type=hidden name=Action value=subscribe>
    </TD><TD>
        <input type=submit name="Submit" value="Subscribe">
    </TD></form></TR>
</TABLE>

This technique of nesting the closing </FORM> tag between a </TD> and </TR> (a technnique commonly used to suppress vertical spacing) can prevent NS6 from signalling that the page has fully loaded. Subsequently, the onload event handler does not fire. This causes problems for any pages that use onload event handlers.

The Solution

There is a standards-based workaround for this HTML hack. You can set the display attribute of your FORM tags to inline. FORMs are a block-level element (like DIV and P and BLOCKQUOTE) that browsers automatically format visually as blocks (e.g., paragraphs). Changing the behavior of specific FORM elements with a class can suppress the extra vertical space and allow your pages to validate, and work in NS6. Here's what we did for WebRef's toolbars:

<STYLE TYPE="text/css">
<!--
    FORM.tb {display:inline;}
-->
</STYLE>
&lt/HEAD>
...
<form class="tb" action="https://www.domain.com/cgi-bin/subscribe.cgi" method="post">
 <TABLE>
    <TR><TD>
        <input name="email" size=10 value="your e-mail">
        <input type=hidden name=Action value=subscribe>
    </TD><TD>
        <input type=submit name="Submit" value="Subscribe">
    </TD></TR>
</TABLE>
</form>

This technique of suppressing space with CSS rather than HTML works and validates on modern browsers. Note that we surround the table with the form and use TDs to force the text field and SUBMIT button to align vertically. For older browsers like NS4 that don't support CSS the vertical space appears, but the percentage of users with older browsers is small and becoming even smaller so we felt the time was right for this change.

At a minimum you should make sure your tags are nested properly. Ideally you should validate your HTML at the W3C's validator. After we updated JavaScript.com's front page to be valid HTML (all except the ad software's ampersands) Netscape properly loaded our pages and executed our external JavaScript news scroller and onload handlers. See our test cases for examples.

NS6 and Table Spacing

The Problem

JavaScript.com's carefully-crafted table layout blew apart with NS6 when we added a full DOCTYPE declaration.

javascript.com with doctype with uri

The Solution

Replace the DOCTYPE that improperly invoked a standards-compliant layout using the "HTML 4.01 DOCTYPE with a URI":

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd">

with the appropriate "HTML 4.01 DOCTYPE without a URI" that invokes Quirks (or backwards-compatible layout) mode:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

javascript.com with doctype without uri

Invoking the "Standard Layout" mode with a typical table layout can cause extra spacing to appear within your tables. This is due to NS6's adherence to the standard box model and how it handles linked images. Removing the DTD URI from the DOCTYPE puts NS6 into "Quirks" mode and eliminates the extra table spacing. This is perfectly valid and indicates to NS6 that you wish a backwards-compatible rendering.

Aligning your linked images to the bottom instead of the baseline (the default), may also do the trick.

IMG {vertical-align:bottom;}

Now that you've got your HTML code cleaned up, it's time to move onto your JavaScript.

111456
[previous] [next]


Created: February 15, 2001
Revised: Mar. 6, 2001

URL: https://webreference.com/programming/javascript/javascript/netscape6/