I’ve reported this bug to the IE team as suggested on IEBlog, 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:
- A floated element —
DIVandIMGboth seem to trigger it. - A block element that ends in italicized text. It could be a
PorDIVthat ends with text enclosed inIorEM, could be an ADDRESS. - Immediately following that block is another one containing a link.
- The link is in the last block element on the page.
- 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:
- Hover over one of the links in that last block element.
- 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 banners had vanished.
Update: (April 26) This bug is still present in IE7 Beta 2.
Update: (June 29) This bug is fixed in IE7 Beta 3!
I am working on a project with a three column layout…
The content div has a padding of 200px left/right and the left and right divs are absolutely positioned where the padding is located.
Only in IE7 (works fine in IE5.01-6) the user has to scroll to the bottom of the page to have the right div appear. On top of that IE FIGHTS the user as if it was being dragged to it’s gruesome death if the user made it to the bottom of the page (to make the div appear).
I’ve attempted to move the right div inside the content div and got the same result. I also can’t get the right: 4px; lower without having it render a horizontal scrollbar so I imagine that there is some unknown margin being added to the div in a sense even though I’ve set every thing’s margin, padding, and border to 0px.
If anyone finds a fix please let me know. My divs are not floating BTW!
For the record: I ran into a similar bug in IE7 (to the original post, not to the previous comment) during my recent redesign.
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 had “layout” — in this case by applying a width.
Had this lame problem and Kelson’s fix of putting a width worked for me. 🙂 thx