Inside Technique : Creating 2D Forms : CSS-P and Forms

CSS is simply about adding presentational information to your existing HTML document. This means that positioning a DIV or FORM element should not change the behavior of the document no more than changing the font of a link does not change the behavior of the link.

Internet Explorer 4.0 follows this philosophy and positioning an element is just a trait of the element's style. A positioned element still retains all the functionality and meaning of a non-positioned element. In Netscape Navigator 4.0, positioning an element actually causes the context and meaning of the element to change from an element to a sub-document. This changes the behavior of the element in drastic ways.

The best way to understand these differences is to consider an example. In the prior page, we explained that Netscape requires input elements to be surrounded by a FORM element to be displayed. Below you will see a button inside of a simple form:

<FORM>
  <INPUT TYPE="button" VALUE="Sample Button">
</FORM>

Next, let's move the button element over 100 points from the left edge:

<FORM>
  <INPUT TYPE="button" STYLE="position: relative; left: 100pt" VALUE="Sample Button">
</FORM>

In Internet Explorer, the button moved, but in Netscape is at the same left position in the first example. This is because Netscape does not support the direct positioning of form elements. When positioning elements, the most reliable cross-browser method is to position a DIV or SPAN element. We are going to do this in two steps, first with a DIV that has no position, and then with a positioned DIV:

Form Button inside of a Standard DIV

<FORM>
  <DIV>
    Button: <INPUT TYPE="button" VALUE="Sample Button">
  </DIV>
</FORM>

Form Button inside of a Positioned DIV

<FORM>
  <DIV STYLE="position: relative; left: 100pt">
    Button: <INPUT TYPE="button" VALUE="Sample Button">
  </DIV>
</FORM>

In the second example, we just added some style information to the DIV. This should not have changed the behavior of the DIV in any way. If you are running Internet Explorer 4.0, the style correctly moves the element, and you see a button in both examples. In Netscape Navigator 4.0, the style information changes the behavior of the DIV and the button is not displayed. Previous generation browsers will see the button less the offset position.

So what is happening in Netscape Navigator 4.0? In Netscape, adding position to an element causes the element to act as a sub-document. Therefore, the contents of a positioned DIV are no longer part of the surrounding document, but instead act as an independent page. Therefore, while the button element is contained within the FORM element in your source, it is not contained within a FORM in the sub-document. The sub-document only consists of the contents of the DIV:

Button: <INPUT TYPE="button" VALUE="Sample Button">

Imagine the above HTML were a complete document. When the above is a complete document, it violates our first cross-browser rule, all form input elements must be contained within a FORM element. This also brings us to our second cross-browser rule: Every positioned element must be able to act as a stand-alone cross-browser HTML document.

A simple solution for this example is to move the FORM element inside of the DIV. However, this does not solve the general problem of creating a real 2-D form where form elements are positioned independently. But before we get onto solving the general problem, we will demonstrate how these documents are represented in the object model.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.