Windowed and Windowless Elements

One thing to watch out for as a Web Developer is windowed elements. Even if the website you create looks as though it works perfectly fine in older browsers, you may have missed checking the placement of windowed elements.

What are windowed elements?
In versions 6 and below of Internet Explorer, some of the HTML components used are ‘borrowed’ from standard windows components, and as a result they are drawn differently. Microsoft decided to call these elements ‘windowed’ elements, which a cynic would say hides a bug as a ‘feature’. Happily, Internet Explorer 7 onwards does not contain any windowed elements.

Why does it matter?
The problem with windowed elements is that they sit above everything else, even if you use a z-index property. They will sit above everything else regardless of the CSS or JavaScript applied. The usual case where windowed elements become a nuisance is when you have a horizontal drop down div/list based navigation and as it overlaps a drop down select box or Flash movie (both of which are windowed elements), the menu will be shown behind them.

Which elements are windowed elements?
According to MSDN, the following are windowed elements:

• <OBJECT>

Bear in mind, windowed elements still use z-index, but it only applies with regards to one another.

How do I fix this?
There’s no real fix to the problem of layering windowed elements. Some web developers create entire select boxes using div elements and JavaScript, while others use a CSS property of visible to hide/show the windowed elements whenever a menu option is selected. However, these are all work arounds to a messy problem, and the best way to avoid windowed elements is to consider them in the initial page design.

Tags: Iframe, Internet Explorer 6, Select, Windowed, Windowless