floats against backgrounds killed by <em> tags in IE7

Discussion in 'Internet Explorer' started by cyroq, Nov 6, 2006.

  1. cyroq

    cyroq Guest

    Just in IE7...

    I've got a pretty simple setup... inside a <div> with a background, I have
    an image floating. Next to it, I have some text I want to italicize.

    However, once my italic text wraps to the next line, the background covers
    the remaining image. If the italic text is all on one line, this problem
    doesn't manifest itself.

    I've tried this with other floating elements as well; all show the same
    symptom (they disappear behind the background).
    I've tried italicizing with <em> and <span style="font-style:italic">. Both
    produce this bug.

    Try this with any floated element or image, i.e.:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    </head>
    <body>
    <div style="background:#FFD14A;">
    <p><img src="rsc/manual.gif" style="float:left;"><em>Text Text Text Text
    Text Text</em></p>
    <div style="clear:both;"></div>
    </div>
    </body>
    </html>

    Can anyone see why this might be or offer a solution? I've tried solutions
    that fixed IE6's peek-a-boo bugs, but those haven't helped me yet.
     
    cyroq, Nov 6, 2006
    #1
    1. Advertisements

  2. hi,

    I got a similar problem using just text in a <div>.
    This is my source:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="eng">
    <head>
    <title>+++ IS Browser Testing +++</title>
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="pragma" content="no-cache">
    </head>
    <body style="margin:0px">
    <div id="FirstDiv">
    <fieldset><legend>Legend</legend>
    <em>Quisque sodales, metus ac placerat fringilla, orci pede euismod pede, eu
    gravida massa sapien vel odio.</em> <br />
    Quisque sed massa. <br />
    Pellentesque faucibus nulla tempor nulla. <br />
    Nam metu.<br />
    </fieldset>
    </div>
    <div id="SecondDiv">
    <fieldset><legend>Legend</legend>
    <p style="font-style:italic">Lorem ipsum dolor sit amet, consectetuer
    adipiscing elit.<br />
    Quisque sodales, metus ac placerat fringilla, orci pede euismod pede, eu
    gravida massa sapien vel odio.<br />
    Quisque sed massa. <br />
    Pellentesque faucibus nulla tempor nulla. <br />
    Nam metu.</p>
    </fieldset>
    </div>
    <div id="ThirdDiv">
    <fieldset><legend>Legend</legend>
    <p><i>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</i></p>
    <p>Quisque sed massa. <br />
    Pellentesque faucibus nulla tempor nulla. <br />
    Nam metu.</p>
    </fieldset>
    </div>
    </body>
    </html>

    -- source end --

    The first <div> seems to work normal. Second and third one seem to handle
    the first line/first paragraph as a legend using only the first word of the
    line as the legend and striking through the rest of the text.

    Might this be a bug?

    cheers

    Michael
     
    Michael Richter, Nov 27, 2006
    #2
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.