Troubleshooting & How-Tos 📡 🔍 Obsolete

IE7 disappearing float bug

NOTE: This article is out of date and likely obsolete.

I’ve reported this bug to the IE team, but I’m posting it here as well. Bear with me, this is a fairly obscure one.

I was trying out the updated version of Internet Explorer 7 Beta 2 preview released yesterday, and noticed a floated image disappearing on one of my web pages. I simplified it down to a minimal testcase and discovered some really weird stuff.

The circumstances seem to be this:

  1. A floated element — DIV and IMG both seem to trigger it.
  2. A block element that ends in italicized text. It could be a P or DIV that ends with text enclosed in I or EM, could be an ADDRESS.
  3. Immediately following that block is another one containing a link.
  4. The link is in the last block element on the page.
  5. CSS rules cause the link to change a block-level property, such as background-color, border, margin or padding.

Then the course of action is this:

  1. Hover over one of the links in that last block element.
  2. Trigger a repaint by scrolling the page, displaying the menu, or switching to another window and back.

The float disappears, and stays invisible until you resize the menu or refresh the page.
I have no idea why the italics cause an issue. I first noticed it with the following markup fragment (simplified) and worked out that removing the address prevented the float from disappearing, but replacing it with <p>Normal <i>Italic</i></p> still triggered the problem.

<address>Address Text</address>
<p><a href="url">Link 1</a> | <a href="url">Link 2</a></p>
</body>

For the record, it was my Comics For Sale page. I scrolled down to the bottom of the page, hovered over the row of W3C links and such, then scrolled back to the top and found that the Firefox and CBLDF (Comic Book Legal Defense Fund) banners had vanished.

Beta Updates

April 26: This bug is still present in IE7 Beta 2.

June 29: This bug is fixed in IE7 Beta 3!

A Similar Bug in IE7 Final

February 11: Again, it’s floats and italics. If a floated element was inside a parent element that had a background, but did not have explicit dimensions, and the text it was placed next to had italics, the floated element would not display below the first line with italics. The solution was to make sure that the parent element “hasLayout” – in this case by applying a width to the parent DIV. I just made it 97% (since 100% confused IE6 even more) and had done with it.