How to deal with translucent SELECT in IE


    Standard select, being under an opaque diva remains completely visible in IE. Because of this feature, drop-down menus, pop-ups, and other items related to positioning divas can look extremely messy.


    There are several ways to solve this problem. I will list them from simple to complex:

    1. hide select
    2. iframeon top of select'a
    3. own select' s


    1. hideselect
    The simplest solution is to set the css property to selects (all or intersecting with the div) visibility: hidden;
    Of course, look for all selects and set each property to not necessary. It is enough to define a css class:
    .noselect select { visibility: hidden; }

    and add this class to the area over which the div appears.
    The style display: none;in this case does not fit - the page layout may crawl.

    2. iframeon top select.
    Perhaps the most interesting solution. For a reason completely incomprehensible to me, selects in IE do not “break through” iframe.
    Those. if you first place an iframe and div on top of it, selects will behave like in all decent browsers.
    Unfortunately, this solution is not suitable for translucent divas. (UPD: thanks beartamer and vithar )

    3. own select's
    No selects - no problem. Those. instead of selects, you can use their imitation.
    There are ready-made scripts that "on the fly" replace all selects with their counterpart based on pop-up divas. Of course, this will solve our problem.
    However, there are a couple of points. Firstly, not all scripts provide full functionality when simulating selects. Secondly, selects will have a non-standard look, and this is not always beneficial.

    If you know other recipes - I will be very grateful for them.

    original in LJ

    Also popular now: