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:
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.
- 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.
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