growse.com

I write things here.

I'm on Keybase.

Workarounds for IE

Earlier on, Ben asked me how to get a div to show above a select box in IE6. Turns out that there’s a bug in IE which means that select controls will always show above divs, regardless of z-indexing. Anyway, after a bit of digging, I found a fix:

<!-- How to get a div to go over a select box in IE--> <!-- The general theory
    is that an iframe needs to be placed in the same position as the div that
    floats over the control. The iframe also needs to be included after every
    other control, as IE 6 layers controls in the order they're declared. In this
    case, I have a div (id="f1") I want to position at 0,0 and show on request. It
    is styled in a way so that when the javascript function runs to show it, it
    should appear over the select control. I also include an iframe which has the
    same positioning and sizing properties as the div I want to show
    (class="float"). The final piece of styling is to the z-index of the div to be
    higher than the iframe, so that it appears above. Now the javascript method
    simply shows both the iframe and the div, and the select box is hidden. Works
    well in both FF and IE6, and on HTTPS sites. -->
<html>
<head>
    <style>
        .float {
            top: 0;
            left: 0;
            width: 300px;
            height: 50px;
            display: none;
            position: absolute;
            background: white;
        }

        #f1 {
            z-index: 3;
            border: 1px solid blue;
        }

        iframe {
            z-index: 1;
        }

        select {
            border: 1px solid green;
        } </style>
    <script language="javascript"
            type="text/javascript"> function showfloat() {
        document.getElementById('f1').style.display = 'block';
        document.getElementById('f2').style.display = 'block';
    } </script>
</HEAD>
<BODY>
<div id="f1" class="float"> This is some testing text</div>
<FORM>
    <select id="test">
        <option value="1">Test item 1</option>
        <option
                value="2">Test item 2
        </option>
        <option value="3">Test item 3</option>
        <option value="4">Test item 4</option>
        <option value="5">Test item 5</option>
        <option value="6">Test item 6</option>
        <option value="7">Test item 7</option>
    </select> <input type="text"/></form>
<p><a
        href="javascript:showfloat()">Show</a></p>
<iframe id="f2" class="float"
        src="javascript:'<html></html';" scrolling="no" frameborder="0"></iframe>
<div
        id="f1" class="float"> This is some testing text
</div>
</body>
</html>

Thanks to these guys for pointing me in the right direction.