Fehlerhafte Darstellung im IE6 u. 7

[Sand*mann]

Hallo zusammen!
Ich weiß echt nicht weiter...XHTML ist valide, CSS ist valide, Denkfehler finde ich nicht...
Es geht um diese zwei Seiten:
http://www.rover-on-tour.de/about.html
http://www.rover-on-tour.de/guestbook.php

Da sieht es für mich so aus, als würde der IE die Anweisung der <br> Tags "clear:left" einfach ignorieren!

In der about.html fehlt im IE zwischen den Bildern nach unten 15px Platz. Manchmal ist gar kein Abstand da, manchmal viel zu wenig.

Das HTML von einem Bild und dem dazugehrigen "Steckbrief" sieht so aus:

	<div class="about">
		<img src="http://www.traum-projekt.com/forum/images/rover.png" title="Blind Image" alt="Blind Image" />
		<div class="about_right">
			<p>Name:</p><p>Age:</p><p>Job:</p><p>E-Mail:</p>
		</div>
		<div class="about_right">
			<p>Daniel Heuermann</p><p>18</p><p>student</p><p>ich-bin-rockbar[at]gmx[dot]de</p>
		</div>
		<br style="clear:left" />
	</div>

Das CSS dazu so:

div.about
{
        margin-bottom:25px;
}
div.about img
{
        float:left;
        border:1px solid #464640;      
        margin-left:15px;
}
div.about_right
{
        float:left;
        margin-left:50px;
} 

Das Bild und die beiden Div-Ebenen werden also links gefloatet und danach wird links "gecleart". Trotzdem schneidet der IE unten von der Ebene #content_box was ab (Siehe bild). Ich weiß nicht, was der IE da für ein Problem mit hat...

Genauso bei dem Gästebuch.
Das entscheidene HTML:

        <div id="gbausgabewrapper">
                <p class="gbpagerlinksoben">{BLAETTERFUNKTION}</p>
                <!-- BEGIN GB-Eintrag -->
                <div class="gbboxbreite">
                        <div class="gbboxinhalt">
                                <div class="gbinfobox"><h4>{ID}</h4><p>{DATUM}</p></div>
                                <p><a href="{HOMEPAGE}">{NAME}</a> wrote:</p>
                                <p>{NACHRICHT}</p>
                <!-- BEGIN ADMINKOMMENTAR -->
                <div class="gbadminkommentar">
                <p><strong>Admin Comment:</strong></p>
                <p>{ADMINKOMMENTAR}</p>
                </div>
                <!-- END ADMINKOMMENTAR -->
                        </div>
                </div>
                <!-- END GB-Eintrag -->
                <p class="gbpagerlinksunten">{BLAETTERFUNKTION}</p>
        </div>
        <div id="gbeintragen">
                <script type="text/javascript">
                <!--
                function SmilieEinfuegen(Smilie)
                {
                        document.getElementById('GBForm').nachricht.value+=Smilie+" ";
                        document.getElementById('GBForm').nachricht.focus();
                }
                //-->
                </script>
                <form id="GBForm" method="post" action="{SCRIPTNAME}">
                        <fieldset id="formset"><legend>Post a commment</legend>
                        <label for="name"><span class="gbwichtig">N</span>ame:</label><input type="text" name="name" id="name" />
                        <label for="email"><span class="gbwichtig">E</span>-mail:</label><input type="text" name="email" id="email" />
                        <label for="homepage">Homepage:</label><input type="text" name="homepage" id="homepage" />
                        <label for="nachricht"><span class="gbwichtig">M</span>essage:</label>
                        <p>Click to paste:
                        <a href="javascript:SmilieEinfuegen(':)')"><img src="gaestebuch/smiley/smile.gif" alt="Smiley laecheln" title="Laecheln" /></a>
                        <a href="javascript:SmilieEinfuegen(';)')"><img src="gaestebuch/smiley/wink.gif" alt="Smiley zwinkern" title="Zwinkern" /></a>
                        <a href="javascript:SmilieEinfuegen(':D')"><img src="gaestebuch/smiley/biggrin.gif" alt="Smiley grinsen" title="Grinsen" /></a>
                        <a href="javascript:SmilieEinfuegen(':lol:')"><img src="gaestebuch/smiley/lol.gif" alt="Smiley laut lachen" title="Laut lachen" /></a>
                        <a href="javascript:SmilieEinfuegen(':rolleyes:')"><img src="gaestebuch/smiley/rolleyes.gif" alt="Smiley sarkastisch" title="Sarkastisch" /></a>
                        <a href="javascript:SmilieEinfuegen(':8')"><img src="gaestebuch/smiley/cool.gif" alt="Smiley cool" title="Cool" /></a>
                        <a href="javascript:SmilieEinfuegen(':?')"><img src="gaestebuch/smiley/confused.gif" alt="Smiley verlegen" title="Verlegen" /></a>
                        <a href="javascript:SmilieEinfuegen(':(')"><img src="gaestebuch/smiley/sad.gif" alt="Smiley traurig" title="Traurig" /></a>
                        <a href="javascript:SmilieEinfuegen(':shock:')"><img src="gaestebuch/smiley/shock.gif" alt="Smiley schockiert" title="Schockiert" /></a>
                        <a href="javascript:SmilieEinfuegen(':devil:')"><img src="gaestebuch/smiley/devil.gif" alt="Smiley teuflisch" title="Teuflisch" /></a>
                        </p>
                        <textarea name="nachricht" id="nachricht" cols="40" rows="6"></textarea>
                        <br />
                        <input name="gbeintrag" id="gbeintrag" type="submit" value="Send Form" class="senden" />
                        <input name="reset" id="reset" type="reset" value="Reset Form" class="reset" />
                        <a href="javascript:void(0)" onclick="window.open('gaestebuch/gbinfo.htm','','width=400,height=450,scrollbars=yes,toolbar=no,resizable=yes,location=no')"><img src="gaestebuch/images/help.gif" alt="Info" title="Klicken um Info zum G&auml;stebuch anzuzeigen" class="info" /></a>
                        </fieldset>
                </form>
        </div>
        <br clear="left" />

CSS:

#gbausgabewrapper { width: 410px; float:left;}
#gbeintragen { width: 420px; float:left; text-align: center; font: 11px Verdana, Arial, Helvetica, sans-serif; margin-left:25px} 

Und es wird wieder was abgeschnitten unten...als würde das clear="left" gar nicht da stehen...

Mit anderen float-Geschichten (Menü, Contact) hat der IE keine Probleme.
Was ist da nur los?

Hoffe es kann mir jemand helfen!

[Boris]

<br> ist kein Blockelement und daher ist das clear wirkungslos, zumal du <br clear="left" ... nicht schreiben solltest.

Wenn, dann <br style="display: block; clear: both" /> oder noch besser so: http://www.jassesnee.de/easyclear/ (siehe "Clearing 21. Jahrhundert).

[Sand*mann]

Moin Boris!
Vielen Dank für deine Antwort, der Link ist echt interessant!

Leider sehe ich im IE7 nichts von einem "auto-clearing" Effekt. Link. Eigentlich unlogisch, weil das Menü oben auch mit der gleichen Variante gecleart wird...
Hier habe ich alle <br clear="left" /> und <br style="clear:left" /> durch <br style="display:block;clear:left" /> ausgetauscht. Im IE ergab das keine Veränderung.

[Boris]

Hast du den Artikel wirklich gelesen?

Alle Browser unterstützen :after - bis auf IE6 und IE7. Die brauchen noch Extra ein height: 1% (IE6), bzw. min-height: 1% (IE7), um ebenfalls "automatisch" zu clearen.

[Sand*mann]

Aha! Na woher hätte ich denn wissen sollen, dass der IE7 min-height haben will Davon stand da ja nichts drin.
Das height war schon mit Hack drin.
Habs jetzt mit nem CC eingebaut und funktioniert einwandfrei! Vielen Dank für deine Hilfe!

[Boris]

Über CC ist das sehr gut, prima.