✔ Render-Fehler oder meiner? 3 positionierte DIV rendern unterschiedlich

tschloss

tschloss

Grünschnabel
Hi,
ich habe ein für mich unverständliches Problem mit 3 "Kacheln", die ich nebeneinander positionieren will.
Jede Kachel ist ein DIV derselben Klasse, angeordnet werden die drei mit "float:left", "float:right" und "margin-left".

In den Kacheln gibt es jeweils ein H2 und ein p.
Die mittlere Kachel wird allerdings anders gerendert: kein Abstand H2 zu Rand vom DIV, die anderen beiden haben einen Abstand.

HTML: 
<html><head>
<style type="text/css">
div.kachel { width: 200px; height: 200px; background-color: #E0E0E0; }
div.kachelzeile { width: 610px; }
</style>
</head><body>
<div class="kachelzeile">
<div class="kachel" style="float:left; "><h2>Links</h2><p>blal asdjkd askdhas dhs aksdh</p></div>
<div class="kachel" style="float:right; "><h2>Rechts</h2><p>blal asdjkd askdhas dhs aksdh</p></div>
<div class="kachel" style="margin-left: 205px; "><h2>Mitte</h2><p>blal asdjkd askdhas dhs aksdh sh dajdhd</p></div>
</div>
</body></html>

Das sieht dann so aus: http://note.io/YxBkzl (Screenshot)
Wo liegt das Problem?

Zusatzinfo:
Füge ich der Kachel ein padding hinzu, rendern alle 3 Kacheln gleich:
HTML: 
div.kachel { padding:1px; ....
Screenshot: http://note.io/YxD5wD

Nachtrag:
Auch ein
HTML: 
h2 {margin-top:0px; }
scheint ein identisches Rendering auszulösen.
Sieht für mich nach einem Bug aus (allerdings in Safari gleich wie im Firefox).

Danke Thomas
 
Zuletzt bearbeitet:
Das ist kein Bug; hier greift die voreingestellte äußere Polsterungseigenschaft margin der Blockelemente <h2> und <p>.

Die Lösung hast du ja schon entdeckt und im Nachtrag genannt.
 
spicelab hat gesagt.:
Das ist kein Bug; hier greift die voreingestellte äußere Polsterungseigenschaft margin der Blockelemente <h2> und <p>.

Die Lösung hast du ja schon entdeckt und im Nachtrag genannt.
Zum Vergrößern anklicken....

Danke!

Trotzdem ist mir nicht klar, warum das H2 teilweise mit und teilweise ohne Polster gerendert wird. Die 3 divs sind ja im Prinzip identisch.
Kannst Du das logisch erklären?

Danke!

VG Thomas
 
Aber logisch ist das doch nicht, oder? Ich dachte bisher, der Sinn von CSS-Layouting sei, Blöcke zu schaffen, innerhalb derer vorhersagbar gerendert wird und die ich mit verschiedenen Positionierungsmöglichkeiten irgendwo hinschieben kann. Dass sich das Verhalten innerhalb eines Blocks durch die Art der Positionierung ändert, scheint mir nicht dem Prinzip zu entsprechen. Vor allem ist dieses Verhalten für mich bei jetztigem Wissensstand unvorhersagbar.
Ich speichere es jetzt mal als "ist halt so" ab, hoffe aber, nicht ständig auf solche Merkwürdigkeiten zu stoßen....

Danke!
VG Thomas
 
Schau dir zum Vergleich das hier an:

HTML: 
<div class="kachelzeile">
  <div class="kachel" style="float:left"><h2>Links</h2><p>blal asdjkd askdhas dhs aksdh</p></div>
  <div class="kachel" style="float:right"><h2>Rechts</h2><p>blal asdjkd askdhas dhs aksdh</p></div>
  <div class="kachel" style="float:left;margin-left:5px"><h2>Mitte</h2><p>blal asdjkd askdhas dhs aksdh sh dajdhd</p></div>
</div>
 
Ok, ich lerne daraus, dass dieselben H2 in floatenden DIVs mit Margin, in nicht-floatenden DIVs ohne Margin gerendert werden.
Noch erstaunlicher wird es durch den Umstand, dass wenn ich dem DIV ein padding gebe, das H2 auch im floatenden DIV ohne Abstand gerendert wird. Es scheint also, dass die Renderengine das H2 selbständig mit einem Sicherheitsabstand nach oben ausstattet, aber nur wenn die umgebende Box floatet.
Find ich gewöhnungsbedürftig.

Ich lernte durch Deinen Code aber auch, dass man Blöcke "hintereinander her-floaten" lassen kann. Sehr gut. Und wenn sie alle floaten, verhalten sie sich wenigstens untereinander gleich.

Danke
Thomas
 
tschloss hat gesagt.:
Noch erstaunlicher wird es durch den Umstand, dass wenn ich dem DIV ein padding gebe, das H2 auch im floatenden DIV ohne Abstand gerendert wird.
Zum Vergrößern anklicken....
Kann ich hier nicht reproduzieren, doch widersprichst du dir mit dieser Aussage auch nicht selber?
tschloss hat gesagt.:
Es scheint also, dass die Renderengine das H2 selbständig mit einem Sicherheitsabstand nach oben ausstattet
Zum Vergrößern anklicken....
Dieser "Sicherheitsabstand" ist, wie eingangs erwähnt, bei allen Blockelementen voreingestellt.
 
Ich habe 3 DIVs der gleichen Class und mit dem gleichen Inhalt. Bei 2 Instanzen wird ein Abstand von der Box zum H2 gerendert, bei einer nicht. Das Verhalten empfinde ich daher als inkonsistent. Die Aussage, dass bei allen Blockelementen ein Sicherheitsabstand eingerechnet wird, trifft daher bei mir hier (Safari und Firefox auf Mac) nicht zu. Das ist es, was mich unzufrieden macht.

Wird das HTML aus meinem Eingangspost bei irgendjemandem konsistent (alle DIVs gleich) gerendert?
(Screenshot hatte ich auch im ersten Post verlinkt (erster Screenshot))

VG Thomas
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück