IE CSS bug: table border showing div with visibility: hidden, position: absolute

Answer 1

On your possible workaround: Since you want visibility:hidden and not display:none I assume that it is important that the table remains the same size. I am afraid that setting border to none can change that.

If you know you want to see white rectange, it is safer to set border color to white instead. Of course,if you have a background you want to see through the hidden table, it does not work.

Answer 2

If you weren't using absolute positioning, I would assume that keeping the size of the div when hidden remained the same mattered to you. However, since you are using absolute positioning, you can just use

display: none;

And this will accomplish the same thing (tested in IE7).

With visibility: hidden, the element you hide takes up the same screen space as if it were still there. When you use display: none, it's almost as if it was removed from the DOM.

The original issue you're seeing could be an IE bug.

Answer 3

The solution I found consists in adding a top/left to move the rendering off-screen, which shields us against IE bugs of this sort. In the above example, this means that you would define the CSS for the hide class as:

.hide {
    visibility: hidden;
    position: absolute;
    top: -10000px;
    left: -10000px;
}

More on: Workaround for table borders showing through on IE

Answer 4

This is a IE bug. Firefox doesn't recognize "border-collapse" using "border-spacing" instead which does not cause this problem. The solution of using "display:none" works, but there's another possibility. If the visibility property is set using Javascript then the border is hidden as well (as expected).

Answer 5

I got a Blogger Template - Namely the infamous Revolution Church V2 - had a hidden code somewhere which generated adsense code for the template publisher that appeared right under the post details. No where in the template is the code generating this adsense can be found. So, I figured using visibility: hidden; is the answer to a div namely 'gadpad' in the template css in which the adsense code (the scam the way I see it) would appear. It worked on newever browsers but not IE6. While the div got hidden, its adsense content showed up.

So, I tried the top/left off-screen hack by Alessandro Vernet and so far, it appears to have worked as the adsense (the scam by the template makers) is no longer visible on the screen so my visitors won't be clicking on it.

Thanks guys.