One of the bugs up to and including IE 6 was that the select element offered no z-index control. That meant it bleed through any DHTML element you placed on top of it. This was extremely irritating as sometimes you could not re-arrange your visual template to accomadate this. Finally IE 7 fixed this known bug. But how many people have upgraded to IE 7 yet? Not many so we as designers still need to worry about this.

For this particluar problem I have spents weeks maybe even months throughout several applications trying to find a work around. I’ve created DHTML drop downs that worked well but couldn’t really handle full dynamic programming. Made the drop downs move away, as a whole slew of other solutions. None of which I liked but had to deal with, just as you have to as well.

I was given the answer today and I am opening it to everybody. Use iframes to cover the select and the drop down won’t appear through. Because the select tag is a windowed control is stays inside its window. covering it with another window means that it CAN’T go into the other window. This is BRILLIANT.

So how to make the iframe move with the DHTML area that you want to see? Simple and assuming your using a div tag :). The last child html element of the containing div tag should the iframe with the same width of the parent div. Trust me this works and was absolutely brilliant.