A paragraph of text with some words in italics in it, with an image floated to the left. All seems well.
Sophie Dennis, Cayenne Web Development. 31 Oct 2006. Last updated 3 Nov 2006.
Aleksander Vacić has encountered another instance of this disappearing content bug, this time with suckerfish-style navigation lists. Again the bug is triggered by a background-color on a parent element. His fix involves moving the background to a different parent element. The reason this works is that element the background is now applied to is floated, and therefore hasLayout.
Read on for more about this bug and how to fix it...
This is intended as a quick overview of the "disappearing image/content bug" in IE7, which occurs when a floated image appears within a paragraph which contains text in italics. While this page details an incredibly specific bug involving italic text, images and background properties, which occurs in IE7 but not other versions of IE, similar "peekaboo" style bugs can be seen in other cases in Internet Explorer. It appears to always be triggered by an ancestor element having a background-color or background-image set, but not "layout". Removing the background CSS property, or triggering layout, both correct the problem.
This page quickly demonstrates what triggers the bug and how to fix it. It's pretty basic at the moment and hardly a work of art, but hopefully it'll be useful to people trying to track this bug down. You need to view the page in IE7 to see the effect of the different examples.
I hope to expand the explanation, tidy the page up and add screenshots for those not using IE7 soon.
This page details a very specific instance of this kind of disappearing content bug which only occurs in IE7, but the same core combination of CSS properties trigger similar disappearing content bugs in earlier versions of IE as well. So here's a quick summary:
The content which disappears has at least one ancestor (i.e. containing element) which has a background-image or background-color specified. It does not matter if the background is set using "background-image: ", "background-color: " or the CSS shorthand "background: " property.
Other background properties on their own don't create disappearing content effects, but are normally only be used in conjunction with background images, so this is largely irrelevant.
Like so many IE bugs the problem will be fixed by ensuring the ancestor with the background "hasLayout" in IE's rendering model. (See "On Having Layout": http://www.satzansatz.de/cssd/onhavinglayout.html). Invoking "layout" on any other containing element within the ancestor will also correct the bug.
A paragraph of text with some words in italics in it, with an image floated to the left. All seems well.
A paragraph of text with some words in italics in it with an image floated to the left. The paragraph has a background-color set. Now if the words in italics wrap over more than one line, the image is hidden from the point where the italics begin. The image still occupies the correct space within the document flow, but it appears to be "masked" by the background color. The bug confusingly does not seem to occur if the italics begin on the first line of the paragraph.
A paragraph of text with some words in italics in it. The paragraph also has a background-color set, but we've triggered hasLayout on the paragraph (we've used min-height, as its unobtrusive and cross-browser, but you could use whatever trigger method works best for your layout). Now if the words in italics wrap over more than one line, the image remains visible.
A paragraph of text with some words in italics in it. This paragraph now has a parent <div> on which the background is set. The bug occurs no matter what ancestor element has a background set.
A paragraph of text with some words in italics in it. The same as above, but we've again triggered hasLayout on the paragraph. Even though the offending background property is on the <div>, triggering hasLayout on either the <div> or the <p> corrects the bug.