nicht angemeldet
Hallo.
Ich habe ein nettes Problem, welches mit Sicherheit bereits 1000 mal gepostet wurde. Ich konnte aber leider keinen dieser Posts finden ;-).
Das Problem ist folgendes. Ich habe einen validen HTML / CSS Code. Im Firefox 2.x funktioniert der Code und alles sieht aus wie es soll. Im IE6 dagegen führt ein <p> Tag (Zeile 38) dazu, dass die <div> Tags einen Zeilenumbruch machen bzw. großen Abstand übereinander haben. Beide Elemente haben aber nichts miteinander zu tun, sie stehen untereinander und sind nicht ineinander verschachtelt. Entfernt man das <p> oder fügt im Anschluss an das </p> ein ein oder ersetzt das <p> durch ein <span>, etc. funktioniert alles auch im IE. Woran kann das liegen?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Persönliche Daten eingeben</title>
<style type="text/css">
* {
background-color:#C0C0C0;
}
.leftLabel, .rightLabel, .leftContent, .rightContent {
float:left;
margin-left: 2px;
}
.leftLabel, .rightLabel {
width:160px;
padding:2px;
border-bottom: solid 1px #7fb4d8;
border-right: solid 1px #7fb4d8;
border-left: solid 1px #7fb4d8;
/* font-weight:bold; */
}
.leftContent, .rightContent {
float:left;
width:20%;
padding-left: 6px;
background-color:white;
}
.clearEnd {
clear:left;
}
</style>
</head>
<body>
<p>Eingabe der Personendaten</p>
<div>
<div>
<div class="leftLabel">Links Nr. 1</div>
<div class="leftContent">Inhalt 1</div>
<div class="rightLabel">Rechts Nr. 1</div>
<div class="rightContent">Inhalt 3</div>
<div class="clearEnd"></div>
</div>
<div>
<div class="leftLabel">Links Nr. 2</div>
<div class="leftContent">Inhalt 2</div>
<div class="rightLabel">Rechts Nr. 2</div>
<div class="rightContent"> </div>
<div class="clearEnd"></div>
</div>
<div>
<div class="leftLabel">Links Nr. 3</div>
<div class="leftContent">Inhalt 4</div>
<div class="rightLabel">Rechts Nr. 3</div>
<div class="rightContent"> </div>
<div class="clearEnd"></div>
</div>
</div>
</body>
</html>