Gunnar Bittersmann: IE 6: falscher oberer Abstand einer Box nach einer gefloateten

Beitrag lesen

SELF-Forum

IE 6: falscher oberer Abstand einer Box nach einer gefloateten

Gunnar Bittersmann Homepage des Autors
– Informationen zu den Bewertungsregeln

@@alle:

HTML der Testseite 1:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
        <title>TEST</title>  
        <link rel="stylesheet" type="text/css" href="1.css"/>  
    </head>  
    <body>  
        <ul>  
            <li>  
                <img src="test.png" alt=""/>  
                <h2>Lorem ipsum</h2>  
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>  
            </li>  
            <li>  
                <img src="test.png" alt=""/>  
                <h2>Lorem ipsum</h2>  
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>  
            </li>  
        </ul>  
    </body>  
</html>

Stylesheet 1:

ul  
{  
    list-style: none;  
    margin: 0;  
    padding: 0;  
}  
  
li  
{  
    border-bottom: 1px solid black;  
    clear: left;  
    margin: 0;  
    overflow: hidden;  
    padding: 1em 0;  
}  
  
img  
{  
    float: left;  
    margin: 0 1em 0 0;  
}  
  
h2, p  
{  
    margin: 0;  
}

Im IE 6 hat die Überschrift fälschlicherweise einen oberen Abstand: Screenshot 1.

Warum? Wie ist dem zu begegnen?

Der Zusatz von

li  
{  
    float: left;  
}

(Testseite 2, Stylesheet 2) löst zwar das Problem für das erste Listitem, schafft aber ein neues fürs zweite: Screenshot 2.

Lässt sich das irgendwie anders beheben als durch Angabe einer Breite?

Live long and prosper,
Gunnar

--
Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)
Beitrag melden
–
Informationen zu den Bewertungsregeln