spacer

Webref WebRef   Sitemap · Experts · Tools · Services · Newsletters · About i.com

home / programming / javascript / netscape6 111456
[previous] [next]

Subject Matter Expert - Managed Services (PA)
Next Step Systems
US-PA-Wayne

Justtechjobs.com Post A Job | Post A Resume
Developer News
News Flash: Adobe Has iPhone Workaround
Adobe's Flash 10.1 Goes Mobile (Minus iPhone)
A Salute to Visionary CEOs


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="http://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>
</HEAD>
...

<form class="tb" action="http://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" "http://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.

home / programming / javascript / netscape6 111456
[previous] [next]

internet.commediabistro.comJusttechjobs.comGraphics.com

Search:

WebMediaBrands Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs

webref The latest from WebReference.com Browse >
Building a Banking Application Home Page with OOP · Mixing Scripting Languages · Review: phpFox, a Social Networking CMS with all the Bells and Whistles
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
Enterprise 2.0: Social Networking in the Cloud · BroadSoft Marketplace Hastens Pace of Telephony Innovation · Review: HTC Hero for Sprint


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


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