Containing block with background image

Floated block with coloured text

Quisque ornare, orci id malesuada interdum, risus urna sodales neque, porttitor tincidunt massa neque vel pede. Vestibulum ipsum neque, semper eu, luctus id, faucibus aliquam, tellus. Nam id augue sed quam viverra tristique. Suspendisse est massa, ultricies eget, ullamcorper sit amet, iaculis pulvinar, tellus. Vestibulum dapibus porta libero. Morbi vel leo et nunc volutpat blandit. Donec vehicula sem eget turpis. Mauris diam turpis, sagittis nec, adipiscing a, fringilla et, nibh. Morbi commodo elit id mauris. Praesent consequat libero a est. Nulla facilisi. Suspendisse eleifend. Phasellus interdum lorem ac felis. In hac habitasse platea dictumst. Quisque ipsum.

This text demonstrates a problem exhibited by Microsoft Internet Explorer version 7.

This bug is new to MSIE7 – Not present in MSIE6

Italicised text in a non-positioned division which has a background image can result in obscuring text in a floated block

Text displayed normally. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Italics Vivamus pulvinar, magna id mattis varius, turpis nibh imperdiet quam, vel condimentum velit sem id elit. Morbi sit amet ante. Curabitur sed ligula convallis mauris pulvinar vulputate.

Italics Second paragraph – Partially Italicised – See description in next paragraph. Italics Italics. Quisque ornare, orci id malesuada interdum, risus urna sodales neque, porttitor tincidunt massa neque vel pede. Vestibulum ipsum neque, semper eu, luctus id, faucibus aliquam, tellus. Italics – Nam id augue sed quam viverra tristique. Suspendisse est massa, ultricies eget, ullamcorper sit amet, iaculis pulvinar, tellus. Vestibulum dapibus porta libero. Morbi vel leo et nunc volutpat blandit.

In the previous paragraphs some text is italicised. In the first paragraph this is a single word only and causes no ill effect. In the second paragraph the last part is italicised. After italisation starts, in MSIE7 text in floated block (to the left of this) is displayed behind the background image of the containing block and thus is obscured. This paragraph is not Italicised but the effect switched on in previous paragraph persists. The switch on mechanism seems to be triggered by italicisation wrapping around the end of a line. Change the width of the viewport to check this by placing the two words 'Italics Italics' at the end of a line.

A solution is to position the containing block Sed enim turpis, aliquam ut, tincidunt a, facilisis id, ante. Nam sit amet lacus. Morbi nec dolor. Donec a arcu. Aliquam lorem. Donec scelerisque nibh non justo. Sed neque. Nulla facilisi. Proin blandit, eros vel congue varius, augue erat vestibulum est, nec pharetra purus wisi at erat. Suspendisse rutrum tincidunt arcu. Mauris suscipit. Fusce elementum lectus at diam. Mauris iaculis, pede et tincidunt placerat, urna dolor posuere magna, vitae malesuada est magna nec lacus. Proin molestie elit a arcu. In faucibus libero at mi. Quisque ac magna.

Check validity of page against HTML 4.01