CSS Overflow Problem in IE6 - Element Does Not Appear/Show Up

Question

The only thing worse than having a CSS problem in IE6 is having a CSS Problem in IE6 that's different from everyone else's.

I have a div, with a fixed width and height, and overflow set to scroll. It works find in IE7/8, FF, Chrome, so on. The div is invisible. It doesn't show up. It's as if I put display:none on it.

If I remove overflow - it shows up. Put it back on - disappears.

Normally I can google my way through problems like this, but I can't find anyone ever getting this bug before. This is irrelevant, this looked promising but didn't help.

Here is the div structure:

<div style="width: 640px; position: absolute; z-index: 100001; left: 312px; top: 59.5px;min-height:0;">
    <div style="width: 100%; min-height:0px" >
=>       <div style="height: 450px; overflow-y: scroll; overflow-x: hidden; padding-right: 17px; min-height:0px;">
            <div style="min-height:0px;">
                <div style="min-height:0px;">
                    <table style="width:100%;border-collapse:collapse;">
                    //lots of rows
                    </table>
                    <input type="hidden" />
                </div>
                <input type="hidden" /><input type="hidden" />
            </div>
        </div>
        <div class="cColHeaderBG" style="text-align: right;"> //Shows up fine
            <input type="button" />
            <button>Save</button>  
        </div>
    </div>
</div>

I know it's hairy, a lot of it is how ASP.Net AJAX renders its popup panel.

Answer 1

The solution was to change

<div style="height: 450px; overflow-y: scroll; 

to

<div style="height: 450px !important; overflow-y: scroll; 

I don't know why this worked (there weren't other style rules being applied anywhere), but it did. Hopefully it helps someone else.