CSS Hilfe benötigt Movable Type

[kelli]

Also unter folgendem Link: http://www.zwocent.com/archives/2005/04/as_mentioned_ea.php sind 5 Kommentare. Mir ist leider nicht ganz klar warum der erste Kommentar einen größeren Abstand nach unten hat als alle anderen.

Da ich nicht weiss an welchem element es hängt hier der Link zu CSS Datei: http://zwocent.com/styles-site.css

Und nachfolgend der Quellcode der Datei:

<div id="commentcontainer"><!--commentcontainer auf-->
		<h4>Comments:</h4>
		<MTComments>
		<div class="<$MTFlipFlop odd="blue" even="red">">
		<p class="top"><$MTCommentOrderNumber$> | Posted by: <$MTCommentAuthorLink spam_protect="1" show_email="0"$> at <$MTCommentDate$></p>
		<img src="<$MTGravatar size="40"$>" class="gravatar leftalign" alt="Gravatar" /><br /><$MTCommentBody$>
		</div>
		<div class="clear"></div>
		</MTComments>
		<MTEntryIfCommentsOpen>
		<MTIfCommentsAllowed>
		<h1>Post a comment:</h1>
		<br />
		<MTIfRegistrationRequired>

Falls mehr Code benötigt wird kurz bescheid sagen.

Thx vorab für die Hilfe.

 

[Pingu]

Weil rechts die Auswahl mit float:right definiert wurde und Du hinter dem ersten Kommentar das float mit clear:both aufhebst. Deswegen wird das nächste Blockelement (der nächste Kommentar) einfach unterhalb allen anderen positioniert.

Deshalb sollte ein mehrspalten Layout auch nicht mit floats definiert werden. Alternative: http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

Pingu

 

[kelli]

Sollte das dann aber nicht bei allen passieren?

 

[Pingu]

Ja, aber das ist doch das erste clear:both (implizit clear:right).

Pingu

EDIT: Wenn Du den Firefox benutzt, da gibt es unter Extras den DOM Inspector. Mit diesem kann sich sehr gut die ansehen wie der Browser die einzelnen Elemente rendert und wie welche Regeln aus den verschiedensten CSS-Definitionen heraus angewandt werden.

 

[kelli]

Danke, das hat mich auf den richtigen Weg gebracht mit clear:left liess sich das problem beheben.