IE 7 Displays Hidden and Display None Elements

Question

I have an element on my page that has "display:none" and "visibility: hidden" applied to it. Yet IE 7 still displays the element. Not only does it display the element, when I open developer tool bar and inspect said element it tells that it is indeed not displayed and not visibile.

Furthermore, When it's in its original state I can't use the selector tool in the developer tool bar to select the element, until I manually remove the "display:none" and "visibility: hidden" rules.

It's as if IE 7 is interpreting my style sheets correctly but the rendering engine is flagrantly ignoring them

Here's the CSS

.ModalTypeTwo .button-wrapper { display: none; visibility:hidden; }

Here's the mark up

<div class="MyModal ModalTypeTwo" id="sb-wrapper" style="top: 20px; width: 926px; left: 328px;">
    <div class="footer wrapper">
        <div class="corner left"></div>
        <div class="corner right"></div>
        <div class="button-wrapper" id="btnContents">
            <a title="contents" id="sb-nav-button">
                <span>Contents</span>
            </a>
        </div>
        <div class="button-wrapper" id="txtContents">
            <div id="sb-title">Lorem Ipsum </div>
        </div>
        <div style="cursor: pointer;" onclick="Modal.next()" class="button-wrapper" id="btnNext">
            <a title="Next"><span>Next</span></a>
        </div>
        <div style="cursor: pointer; display: none;" onclick="Modal.previous()" class="button-wrapper" id="btnPrevious">
            <a title="Previous"><span>Previous</span></a>
        </div>
    </div>
</div>

Notice that the above rule should apply to #btnContents, #txtContents, #btnNext, and #btnPrevious, however in IE& only the later 3 are hidden.

Answer 1

Try applying overflow: hidden; on ModalTypeTwo. I had a similar problem in IE7 and hiding the overflow of the parent fixed it.