why IE6 looses white spaces
Monday, October 29th, 2007We have been battling with a dilemma of missing white spaces in IE6 for a while now. usernames that have been hoverized (your profile appears when you hover over them) start to stick to the text after them no matter how many white spaces you add and where. The only solution is to add an explicit non breaking space (nbsp) but then the interface looks clunky, due to the disproportional spacing.
It turns out that the reason is that IE6 doesn’t like a div inside inline text even if its display is set to none. Once I changed the div to a span, the white spaces were honored and the username link stopped sticking to the surrounding text. It also doesn’t matter if the span with display:none has divs inside it, as long as the outer tag of the non displayed html is not a block type element.
Example:
Link sticks to text after it: <a href=’somewhere’>link text</a><div style=’display:none;’>hover box</div> sticky text
link doesn’t stick to text after it: <a href=’somewhere’>link text</a><span style=’display:none;’>hover box<div>some internal div that doens’t make a difference</div></span> non-sticky text