Spaces surrounding 'hidden inline' elements in IE?

a b c d hid hid hid hid e fhidhidhidhid g
hid
hid
hid
hid
h

Should look like:

a b c d hid hid hid hid e fhidhidhidhid g
hid
hid
hid
hid
h

code:

(inputs, spans and divs have display: none;)

If you read this, see source directly. Insn't the <code>xmp</code> tag superb?? ;)

^- Content added by javascript. BTW IE does it pertty ugly…

Conclusion?

Every initially inline element which is hidden by display: none forces IE6 to render surrounding spaces.

Weird is that block elements (divs) do not cause that.

"Workaround"

Just force them to be excluded from document flow by position: absolute.

IF IE6 knew attribute selector, it would be just input[type=hidden] { position: absolute; }.

"Real" workaround

Would be quite difficult. In the real world you have to select theese elements other way (extra class?). Javascript repeater (see below), or maybe some weird IE only CSS expression?

See also

www.cactusoft.com/samples/phantomtext.htm