show div over top of selects (drop downs)

crmpicco · February 9th, 2006, 10:31 AM

I have drop down menus on my page.

When I mouseover an image a floating DIV appears at the foot of the screen.

However, the <selects> dropdowns show through the div when the div is positioned over the selects????

Is there a way to have the div appear over the dropdowns, without hiding the drop downs???

Thanks.
Picco

www.crmpicco.co.uk

ChrisScott · February 9th, 2006, 11:17 AM

To solve the problem in IE, you can create an iframe in the same position as your div with opacity of 0 using a filter. This will hide the part of the select box that would normally show through.

HTH,

Chris

crmpicco · February 9th, 2006, 11:27 AM

im not overly sure what you mean chris,this is the CSS i am using

Code:

.demo {color:#000000; border-color:#666666; background-color:<%=minirules%>; font-family:Verdana, Arial, Helvetica, sans-serif;    font-weight:bold; layer-background-color:#cccccc; position:absolute; bottom:0px; width:100%; height:100px; visibility:hidden; z-index:5; border-color:#FFFFFF; border:inherit;}

The div is always positioned at the foot of the page, should the selects be wrapped in a DIV?

Thanks.

Picco

www.crmpicco.co.uk

ChrisScott · February 9th, 2006, 12:11 PM

This should get you started...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>div over select</title>
        <style type="text/css">
        #myDiv, #myIframe{
            width: 150px;
            height: 150px;
            position: absolute;
            top: 10px;
            left: 10px;
        }
        #myDiv{
            background-color: lightgrey;
            z-index: 10;
        }
        #myIframe{
            filter: "progid:DXImageTransform.Microsoft.Alpha(style=0, opacity=0)";
            z-index: 9;
        }
        #mySelect{
            width: 300px;
            height: 200px;
        }
        </style>
    </head>
    <body>

    <form>
        <select id="mySelect" multiple="multiple"></select>
    </form>


    <div id="myDiv">some text</div>
    <iframe id="myIframe"></iframe>

    </body>
</html>

HTH,

Chris

crmpicco · February 10th, 2006, 05:21 AM

thanks chris, i'll give it a try.
so you are saying put the iframe underneath my div?

www.crmpicco.co.uk

ChrisScott · February 10th, 2006, 05:40 AM

Hi Picco,

Yep, exactly that - it obscures the select element and using a filter on it stops it showing through your div.

Cheers,

Chris

crmpicco · February 10th, 2006, 06:23 AM

ok, when you say obscure you mean it is not actually hidden? the div is just shown on top of it?

www.crmpicco.co.uk

ChrisScott · February 10th, 2006, 06:31 AM

Yep, try the example, it shows the div over a select element without hiding the select element.

crmpicco · February 10th, 2006, 06:56 AM

great, i am working on a bit of database work at the mo, but will get back to it

www.crmpicco.co.uk

crmpicco · February 13th, 2006, 12:29 PM

a new problem i am experiancing is that because the DIV is built dynamically the height changes, sometimes it is 100px sometimes is is 300px?? So is there a way to make the CSS dynamic?

www.crmpicco.co.uk