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.

Peekaboo!
I’d like to be on top

The code for this follows:

Peekaboo!
I'd like to be on top

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:

Peekaboo!
I’d like to be on top

With the following HTML code

Peekaboo!
I'd like to be on top

Advertisements
This entry was posted in JavaScript, Programming. Bookmark the permalink.

One Response to Div, IFrame, Form: the CSS version of Scissor, Paper, Stone

  1. Ian Hash ( ) says:

    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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s