nicht angemeldet
<p> Tag verursacht im IE Abstandsfehler bei <div>
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>
-
du hast in deinem CSS keinerlei Angaben zu Abständen zwichen DIVs und Ps gemacht, also ist eine gewisse Willkür den Browsern auch erlaubt.
-
Danke für die Antwort. Inhaltlich finde ich sie allerdings etwas unbefriedigend. Wenn ich davon ausgehe, dass jedes HTML-Tag seine browserseitige Standard-Formatierung besitzt, ist es doch recht merkwürdig, dass sich anscheint die <p> Formatierung auch auf die folgenden <div>-Tags auswirkt. Schreibt man allerdings irgendwas (Text, Tag, , …) nach dem </p>, so hebt sich diese Übertragung der Formatierung auf. Will ich nun die Standard-Formatierung des <p> beibehalten, werde ich durch das von dir als willkürlich beschriebe Verhalten dazu gezwungen eine eigene Formatierung zu verwenden. Welches System steht also tatsächlich hinter diesem Verhalten? Wie ist es zu verstehen? Und warum ist es im IE 7 auch noch so?
Ich bedanke mich für die Antworten.
-
-
Wieso das so ist weiss wohl nicht mal Microsoft...
;-)Aber du kannst mit
* { background-color:#C0C0C0; margin:0; }die Abstände zurücksetzen und musst sie dann für die einzelnen Elemente wieder neu setzen.
Gruss,
nam