Div, IFrame, Form: the CSS version of Scissor, Paper, Stone
An interesting browser (mostly, it has to be said, Internet Explorer) rendering issue has produced an slightly odd workaround. The problem arises from the rendering of form elements, specifically dropdowns, by the browser. These are registered as windows components and hence are rendered somewhat outside of the other HTML elements. (This is not true in Firefox and other Mozilla based browsers which have their own rendering. It is painfully true of the old Netscape 4 where all form elements show through, but there’s no fix for that at all.) The same rendering issue is also true of frames, iframes and embedded objects (albeit Flash can now be specified with a transparent background).
This gives the situation where a layer (in a div tag) over the top of a dropdown box leaves half the select box visible through the layer. E.g.
The code for this follows:
The solution I’ve found is that IFrames can be rendered on top of select tags. Not much use in itself, but ever since Internet Explorer 5.5 it’s been possible to give IFrames a Z-Index and render layers on top of them. So in the rendering scheme of things:
- select beats div
- iframe beats select
- div beats select
Hence the ‘Scissors, paper, stone’ reference of the title. The order does seem somewhat circular
To solve the IE rendering problem we can insert an iframe between the div and the select with the same dimensions as the div tag over the top, as follows:
With the following HTML code
One Reply to “Div, IFrame, Form: the CSS version of Scissor, Paper, Stone”
HiThe power of CSS is amazing. I’ve seen a few sites like this one where i’ve been blown away by what you can do. Alot of DHTML and other funkiness can be avoided if your clever with your stylesheet.I want to manage a stick up footer on the website for IE 5.0 +. with CSS As you can see 1 on bmw.co.ukthanksImran