Looking For Generalized Solutions for CSS display:none; Alternates

I haven't had a chance to edit the article above further, but I wanted to point folks to:

http://snook.ca/archives/html_and_css/hiding-content-for-accessibility

Good to have more discussion/debate about how to best implement this. It's hard to begin to summarize all of the approaches & views that were considered to implement this.

IE6/7 behaviour observations: (only testing method, not tested any default themes as I write my own sorry!)

2) Content that is supposed to be made visible upon focus while remaining absolutely positioned will become visible upon focus in all browsers except IE6/7. To make it visible in IE6/7 I have to use static or relative positioning which breaks the intended design. I dealt with this by using the off-left solution in the IE6 and IE7 stylesheets so only IE6 and IE7 will have rtl and bidirectional issues.

This is part of an old IE bug - the hover/focus/active rules need a bit more for IE6/7 - usually any default property that is is not specified on the original rule, however the problem is which one would not affect the intention, I think visibility: inherit should be good to go.. so I tested this and found it works to make the content visible: (the first clip rule is also needed for IE7)

not sure what's meant by #3, as I tested this with hover and it worked fine

As for the IE7 scrollbar issue reported in some places, I can replicate and found that adding left: 0; to the .element-invisible rule should help most cases - why it happens is that the hidden block in most cases will be 100% of the container in width, if an unforced scroll situation, which if the hidden element is at the end of a line (like after a float instead of under it grr!) creates IE's scroll - so adding that just helps IE to justify to the left. Now the position: static reveal is OK as it will ignore this, like clip itself, however if a absolute/relative position reveal is needed this may need overruled in theme.

The above will not cure the "forced" scrollbar problem (as tested by using white-space: nowrap; on a long text element) reported by snook - but that must surely be a real edge case? - Most designs now have overflow: hidden somewhere on a containing (block formatting context) div and that in itself will make Safari/Opera and IE crop the content so I can't think of a legitimate test case.. however in the interest of trying

Note: the width/height 1px overruled with width:inherit fix - does not work in IE6/7, they don't "get" inherit so they do not overrule the 1px :( - for info, IE7 and below only supports !inherit on direction and visibility

and finally while playing around I discovered that the above IE hover bug, the default IE scrollbar and the forced scrollbar scenario can all be counteracted (in LTR anyway, and most RTL I think) using right: 0;

(position is commented out as this was the hover code as I was also testing if element to remain Absolute positioned scenario):

if right: 0; is used the right: auto override is enough to cure the IE hover bug, so you wouldn't actually need the visibility: inherit rule, however I left it there with the bug comment for completeness

Just some random findings as I was re-checking how this method was doing :)