IE 7 Displays Hidden and Display None Elements - css

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.

Answer 2

http://jsfiddle.net/UugDU/
I added some start and end text just to make sure the result was being rendered at all.
I have no problems in IE7. It must be a problem somewhere else in your code. I suggest you start with the full version of your code, and whittle it down to the minimum required to produce the error and post that.

Answer 3

If this helps future Googlers of this issue, the problem is with how Internet Explorer versions 4-7 interpret "visibility:hidden" in CSS. Those older browsers will hide their immediate content, but not their HTML children's content. In addition, IE5 had a weird "reverse" bug to that problem where adding "visibility:visible" to an immediate content element under the hidden parent would not be visible. That is based on my knowledge of the issue and could have more subtleties I missed.
In general, if you are testing in IE7 browsers, try and avoid showing and hiding things using "visibility". If you must hide something in those older browsers, just remove them completely using "display:none", which was almost always universally reliable in these older browsers. Or, if they must be accessible in the page for IE7 users, just not shown to them, you can move them quickly off the page using CSS as shown below. Note: This will not affect your page design or layouts.
position: absolute !important;
top: -9999px !important;
left: -9999px !important;