this site overcomes the "select / z-index / IE" issue

[Bucky]

I know this issue is discussed frequently, but all the threads end
with, "There is no way around this... this is how IE is designed."

Well, I found a site that has completely solved this problem. It's not
hiding the entire SELECT element, or using some other method to
simulate the SELECT box. It's using real SELECT boxes, and even if the
menu layer only covers half of the SELECT box, it displays it
correctly.

I tried looking in the source, but I can't figure out how it does it.
Can anyone figure it out? The source code is very clean. I found some
code that checks for SELECT elements and hides them if overlapping, but
that doesn't explain how it can hide half of the SELECT element.

Open this site with IE, and mouse over the menus. You will be amazed:
http://titantv.com/TTV/Grid/Grid.aspx

[Bucky]

> I tried looking in the source, but I can't figure out how it does it.

Can anyone figure it out? The source code is very clean. I found some
code that checks for SELECT elements and hides them if overlapping, but
that doesn't explain how it can hide half of the SELECT element.

I've narrowed it down to this include file, which unfortunately, is not
easy to read:

http://titantv.com/scripts/menu/menu...6DHTML.js.aspx

It appears that this was generated by this professional software:
http://www.coalesys.com/products/mer...es/webmenu.asp

One of the features listed is "Cover IE Select Boxes". =) I just wish I
could figure out how they do it!

[Bucky]

I couldn't fully understand the code, but I did get an idea while
trying to decipher the code. I tested my idea, and it worked!

You can cover up an IE select box with an iframe. So whenever you
display a layer menu with a div tag, you place an iframe of the exact
size and position underneath it. The iframe will automatically block
out anything below, even PARTIAL SELECT BOXES!

Here's the concept:

div layer menu: z-index: 20
iframe: z-index: 10
select: z-index: 0

[small]

hi,
Good job!!