Form Elements Overlapping a Styled Layer | WebReference

Form Elements Overlapping a Styled Layer

Form Elements Overlapping A Styled Layer

During the process of HTML coding you've probably encountered an annoying form element related problem, which could be described as Form Elements Overlapping a Styled Element. Today, I'll discuss this problem and present an effective workaround for it. If you're wondering why this is a workaround and not a permanent solution, it's "because the big guys (Netscape and Microsoft) don't have one."

Let's get to the heart of the matter. This peculiar behavior is caused by the default viewing priorities of the HTML elements. For example:
  1. A frame will take priority over all other html elements and will be displayed on top.
  2. A form element will take priority over any of the non-form elements
Below are some examples of form elements and non-form elements:

  Form Elements
  • Textarea
  • Select - list box or drop down
  • input type text
  • input type radio
  • input type checkbox
  Non-Form Elements
  • anchor tag (link)
  • div tag
  • span tag
  • and table tag and all of its tributory elements (thead, tfoot, tbody, tr, td)

Among the HTML elements mentioned above are some elements which are known as windowed elements and windowless elements. Today's problem concerns windowed elements. What happens is that the operating system (by default) paints these elements on top of any of the windowless elements that may appear on a given HTML page. At this point, if you think the CSS property z-index is supposed to control the overlapping order of display for any HTML element, then you're right, it should. However, the z-index has no bearing on windowed elements in comparison with the windowless elements.

 Below are some examples of windowed and windowless elements:

  Windowed Elements

  • SELECT elements.  
  • <OBJECT> tag elements.  
  • Plug-ins.  
  • IFRAMEs in IE 5.01 and earlier.
  Windowless Elements
  • Most of the HTML elements, such as hyperlinks or tables.
  • Most of the form elements except "select" element.
  • IFRAMEs in NS6+/IE 5.5 and later.

  Netscape/Mozilla

In NS browsers below version 6 all of the form elements have a higher priority as compared with other HTML elements, such as links, tables or layers. However, in NS 6+ browsers, the IFRAME element and all the form elements are displayed according to the z-index property value or in the sequence they appear in the HTML page, except the "SELECT" element.

  Internet Explorer

In the most current IE browser (6.0), the IFRAME element and all the form elements are displayed according to the z-index property value or in the sequence they appear in the html page,except the "SELECT" element.

  Opera

In latest Opera (7.10_) browser, all of the form elements including the "SELECT" element are displayed according to the sequence of their presence or z-index. However, the latest version of Opera does not render IFRAME as windowless element. Instead, it's displayed as a windowed element and takes precedence in the display order over any other windowless element.

Created: June 2, 2003
Revised: June 2, 2003

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