Thursday, February 05, 2009

Duplicate Rendered Characters in IE6

The Issue: I’ve got an absolutely positioned link inside a floated container. The link is being partially duplicated outside of and below the container.

According to P.I.E., the problem is that I have comments between all the floated siblings of the container, and IE has a problem figuring out what to do with comments between floats (WTF?!). This bug also pops up if there are hidden inputs and any item with display: none amongst the floating siblings, though I have yet to experience this delight for myself.

The Solution: I tried all of the suggestions on the P.I.E. site, but only two things worked for me.

  1. Removing all of the comments directly between the floating containers.
  2. Using the IE conditional to wrap the comments, as in:
<!--[if !IE]><!-- MY COMMENT --><!--[endif]-->

Labels: ,