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:

<div style="position: relative;">
  <form name="testForm" id="testForm">
    <select name="test" id="test">
        <option>Peekaboo!</option>
    </select>
  </form>
  <div style="background: rgb(0, 102, 153); position: absolute;
    left: 50px; top: 10px; width: 300px; height: 20px;
    color: rgb(255, 255, 255); overflow: hidden;
    clip: rect(auto, auto, auto, auto);">
      I'd like to be on top
  </div>
</div>

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

<div style="position: relative;">

  <form name="testForm" id="testForm">
    <select name="test" id="test">
      <option>Peekaboo!</option>
    </select>
  </form>
  <iframe style="position: absolute; left: 50px;
    top: 10px; width: 300px; height: 20px; background: #069;
    color: #fff; overflow: hidden; clip: auto;"></iframe>
  <div style="position: absolute; left: 50px;
    top: 10px; width: 300px; height: 20px; background: #069;
    color: #fff; overflow: hidden; clip: auto;">
      I'd like to be on top
  </div>
</div>