Vital Logs

In IE6, we have seen two unusual behaviors solved by position relative.

One is known as the peekaboo bug, where elements to the right of a float div disappear and reappear. You will see this technique used in communities and mymedhelp layout files.

The new one is the border flash bug, where the page renders correctly, but the border disappears when you use the vertical scroll bar to move up and down. This was found in the community members page.

We do not have this bug on tags which uses the exact same partial…so I hypothesize that the vertical scroll bar makes IE6 hit this error path

#community_members {

overflow: hidden;
+ position: relative;

}

We 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