Dastellung IE und FF unterschiedlich

<<< J >>> · 19.07.2007, 16:16

Hallo Forumsgemeinde,

nach längerer Abstinenz habe ich mich mal wieder mit meiner HP beschäftigt, was wohl auch der Grund ist, warum ich nicht weiter komme. Ich bin mir aber sicher, das es für mein Problem eine einfache Lösung gibt:

In meiner Linkliste soll links eine Grafik zur verlinkten HP stehen und rechts ein beschreibender Text. Meist ist das Bild höher als der nebenstehende Text. Per float umfließt der Text die Grafik.

Zum Schluß soll ein Trenngrafik folgen, und hier fängt das Problem an: Diese Grafik soll nach oben und unten z.B. 20px Abstand einhalten. Funktioniert im IE, der den Abstand von 20px immer zum höchsten Element (Bild oder Text) einhält. FF hält den Abstand nur zum Text ein. Ich weiß, daß es irgendwie mit dem float zusammenhängt, aber nicht wie.

Über Hinweise zu umständlicher oder unsinniger Programmierung würde ich mich auch freuen.

Quelltext:

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="DC.Title" content="Homepage der Freiwilligen Feuerwehr Wilster">
<meta name="DC.Creator" content="Jan Auhage">
<meta name="DC.Subject" content="Informationen zur Jugendfeuerwehr Wilster">
<meta name="DC.Description" content="Startseite des Webangebots">
<meta name="DC.Publisher" content="Feuerwehr Wilster; der Wehrf&uuml;hrer; Bj&ouml;rn Kr&ouml;ger">
<meta name="DC.Contributor" content="Jan Auhage">
<meta name="DC.Date" content="2004-01-17">
<meta name="DC.Type" content="Text">
<meta name="DC.Format" content="text/html">
<meta name="DC.Identifier" content="http://www.feuerwehr-wilster.de/">
<meta name="DC.Language" content="de">
<meta name="DC.Rights" content="http://www.feuerwehr-wilster.de/impressum/impressum.htm">
<link rel="stylesheet" type="text/css" href="../css/css_ff.css">
<link rel="shortcut icon" href="favicon.ico">
<style type="text/css">
	.trenn { display:block; margin:20px 0px 20px 0px; }
	.bild { float:left; margin-right:20px; }
</style>
<title>Feuerwehr Wilster > Links</title>
</head>

<body>
<div id="inhalt">
	<div><img src="../images/head_ff.gif" style="width:800px; height:103px;" alt="Titelbild Feuerwehr Wilster"></div>
	<div id="topnavi">
		<ul>
			<li><a class="ff" href="../index.htm">Feuerwehr</a></li>
			<li><a class="jf" href="../jf/jf.htm">Jugendfeuerwehr</a></li>
			<li><a class="mg" href="../login/login.htm">Mitglieder</a></li>
		</ul>
	</div><!-- Ende von Topnavigation -->
	<div id="kopf"></div>
	<div id="mitte">
		<div id="navigation">
			<ul>
				<li><a href="../index.htm">Home</a></li>
				<li><a href="../ff/info/feuerwehr.htm">Informationen</a></li>
				<li><a href="../ff/mannschaft/vorstand.htm">Mannschaft</a></li>
				<li><a href="../ff/ausruestung/fahrzeuge.htm">Ausr&uuml;stung</a></li>
				<li><a href="../ff/einsaetze/einsaetze.htm">Eins&auml;tze</a></li>
				<li><a href="../ff/erste_hilfe/notruf.htm">Erste Hilfe</a></li>
				<li><a href="../ff/tips/rauchmelder.htm">Tips</a></li>
				<li><a href="../kontakt/kontakt.htm">Kontakt</a></li>
				<li><a href="http://www.gaestebuch.com/gb-extern/zusammen.asp?GUID=A59C5A5C-7D27-479C-94C3-3AE6ECD1D29D" target="_blank">G&auml;stebuch</a></li>
				<li><a class="aktiv" href="../mg/links/links.htm">Links</a></li>
			</ul>
			<a href="http://www.rauchmelder-lebensretter.de/" target="_blank"><img src="../images/rrl.gif" style="width: 151px; height: 89px;" alt="Rauchmelder retten Leben!"></a>
		</div>
		<div id="text2">
			<h1 class="header">Links</h1>
			<img class="trenn_rot" src="../images/trenn_rot.gif" alt="">
			<div>
				<a href="http://www.wilster.de/" target="_blank"><img class="bild" src="../links/images/ortsschild.jpg" style="width:80px; height:53px;" alt="Ortsschild"></a>
				<a href="http://www.wilster.de/">Homepage</a> der Stadt Wilster und der Wilstermarsch mit Informationen rund um die Region.<br>Interaktiver <a href="http://www.stadtplan-center.de/wilster/index.html" target="_blank">Stadtplan</a>
			</div>
			<div style="clear:left;">
				<img class="trenn" src="../images/trenn_blau.gif">
				<a href="../links/ff_steinburg.htm"><img class="bild" src="../links/images/wappen_steinburg.gif" style="width:80px; height:78px;" alt="Wappen Steinburg"></a>Links zu 
				<a href="./ff_steinburg.htm">Feuerwehren</a> aus dem Kreis Steinburg.
			</div>
			<div style="clear:left;">
				<img class="trenn" src="../images/trenn_blau.gif">
				<a href="http://www.kfv-steinburg.de/" target="_blank"><img class="bild" src="../links/images/kfv_steinburg.gif" style="width:80px; height:63px;" alt="KFV Steinburg"></a>
				<a href="http://www.kfv-steinburg.de/" target="_blank">Homepage</a> des Kreisfeuerwehrverbandes Steinburg mit aktuellen Meldungen und Informationen rund um den Verband und seine Mitglieder.
			</div>
			<div style="clear:left;">
				<img class="trenn" src="../images/trenn_blau.gif">
				<a href="http://www.lehrinstitut-rettungsmedizin.de/" target="_blank"><img class="bild" src="../links/images/li.gif" style="width:80px; height:85px;" alt="Lehrinstitut Rettungsmedizin"></a>
				<a href="http://www.lehrinstitut-rettungsmedizin.de/" target="_blank">Homepage</a> des Lehrinstituts f&uuml;r Rettungsmedizin, welches die First Responder der Feuerwehr Wilster ausgebildet hat. Informationen zum Dozententeam und Kursangebot.
			</div>
			<div style="clear:left;">
				<img class="trenn" src="../images/trenn_blau.gif">
				<a href="http://www.irls-elmshorn.de/" target="_blank"><img class="bild" src="../links/images/irls.gif" style="width:80px; height:80px;" alt="IRLS Elmshorn"></a>
				<a href="http://www.irls-elmshorn.de/" target="_blank">Homepage</a> der integrierten Regionalleitstelle in Elmshorn mit Informationen zu Aufbau, Technik und Funktion.
			</div>
			<div style="clear:left;">
				<img class="trenn" src="../images/trenn_blau.gif">
				<a href="http://www.lfs-sh.de/" target="_blank"><img class="bild" src="../links/images/lfs.gif" style="width:80px; height:68px;" alt="Landesfeuerwehrschule Schleswig-Holstein"></a>
				<a href="http://www.lfs-sh.de/" target="_blank">Homepage</a> der Landesfeuerwehrschule Schleswig-Holstein mit aktuellen Informationen zum Lehrgangsangebot, Gesetzen und Erl&auml;ssen des Innenministeriums. Besonders Interessant auch der Onlinevortest zum Gruppen- bzw. Zugf&uuml;hrer oder die anderen E-Le@rning-Module.
			</div>
			<div style="clear:left;">
				<img class="trenn" src="../images/trenn_blau.gif">
				<a href="http://www.lfv-sh.de/" target="_blank"><img class="bild" src="../links/images/lfv-sh.gif" style="width:80px; height:81px;" alt="Landesfeuerwehrverband Schleswig-Holstein"></a>
				<a href="http://www.lfv-sh.de/" target="_blank">Homepage</a> des Landesfeuerwehrverbandes Schleswig-Holstein.
			</div>
			<div style="clear:left;">
				<img class="trenn" src="../images/trenn_blau.gif">
				<a href="http://www.feuerwehrverband.de/" target="_blank"><img class="bild" src="../links/images/dfv.gif" style="width:80px; height:112px;" alt="DFV"></a>
				<a href="http://www.feuerwehrverband.de/" target="_blank">Homepage</a> des Deutschen Feuerwehrverbandes mit Informationen zu Mitgliedern und Aufgaben.
			</div>
			<div style="clear:left;">
				<img class="trenn" src="../images/trenn_blau.gif">
				<a href="http://www.jugendfeuerwehr/" target="_blank"><img class="bild" src="../links/images/djf.gif" style="width:80px; height:35px;" alt="DJV"></a>
				<a href="http://www.jugendfeuerwehr.de/" target="_blank">Homepage</a> der Deutschen Jugendfeuerwehr mit Informationen zu Jugendfeuerwehr, ihrer Arbeit und einem Forum für Interessierte.
			</div>
			<div style="clear:left;">
				<img class="trenn" src="../images/trenn_blau.gif">
				<a href="./ff_brd.htm"><img class="bild" src="../links/images/rlbs.gif" style="width:80px; height:80px;" alt="Links"></a>
				<a href="./ff_brd.htm">Links</a> zu Feuerwehren aus ganz Deutschland.
			</div>
			<div style="clear:left;">
				<img class="trenn" src="../images/trenn_blau.gif">
				<a href="http://www.dwd.de/de/WundK/Warnungen/index.htm/" target="_blank"><img class="bild" src="../links/images/dwd.gif" style="width:80px; height:59px;" alt="DWD"></a>
				<a href="http://www.dwd.de/de/WundK/Warnungen/index.htm/" target="_blank">Link</a> zu den Unwetterwarnungen des Deutschen Wetterdienstes für ganz Deutschland.
			</div>
			<div style="clear:left;">
				<img class="trenn" src="../images/trenn_blau.gif">
				<a href="http://www.feuerwehr.de/" target="_blank"><img class="bild" src="images/feuerwehr.gif" style="width:233px; height:34px;" alt="Feuerwehr-Forum"></a>
				<a href="http://www.feuerwehr.de/" target="_blank">Link</a> zum Feuerwehr-Forum
			</div>
			<div style="clear:left;">
				<img class="trenn" src="../images/trenn_blau.gif">
				<a href="http://www.rettungsdienst.net/" target="_blank"><img class="bild" src="images/rettungsdienst.gif" style="width:326px; height:53px;" alt="Rettungsdienst"></a>
				<a href="http://www.rettungsdienst.net/" target="_blank">Link</a> zum Rettungsdienst-Portal.
			</div>
			<div style="clear:left;">
				<img class="trenn" src="../images/trenn_blau.gif">
				<a href="http://www.feuerwehr.net/" target="_blank">Link</a> zum weltweiten Feuerwehrverzeichnis.
			</div>
		</div>
		<div style="clear:left;"></div>
	</div><!-- Ende von Mitte -->
	<div id="fuss"></div>
	<div id="bottom">[<a href="../impressum/impressum.htm">Impressum</a>] • [<a href="../inhaltsverzeichnis/inhaltsverzeichnis.htm">Inhaltsverzeichnis</a>] • [<a href="http://www.wilster.de/" target="_blank">Stadt Wilster und die Wilstermarsch</a>]</div>
</div><!-- Ende von Inhalt -->
</body>
</html>

Über Hilfe würde ich mich freuen.

Gruß Jan

buffy2511 · 19.07.2007, 16:37

Versuchs mal mit padding. Ich habe mit margin im Firefox auch so meine Probleme. Mit padding funktioniert es dann meist.

hero-master · 19.07.2007, 17:20

Zitat:

Zitat von buffy2511

Ich habe mit margin im Firefox auch so meine Probleme.

Dann liegt es aber sicherlich an deiner falschen Vorstellung von padding/ margin bzw. deiner falschen Interpretation davon wie es aussehen sollte

@Jan:
Versuche mal das floaten zu entfernen, bevor du das nächste Div öffnest:

HTML-Code:

			<div>
				<img class="trenn" src="../images/trenn_blau.gif">
				<a href="http://www.kfv-steinburg.de/" target="_blank"><img class="bild" src="../links/images/kfv_steinburg.gif" style="width:80px; height:63px;" alt="KFV Steinburg"></a>
				<a href="http://www.kfv-steinburg.de/" target="_blank">Homepage</a> des Kreisfeuerwehrverbandes Steinburg mit aktuellen Meldungen und Informationen rund um den Verband und seine Mitglieder.
			</div>


<br style="clear:left">
			<div>

<<< J >>> · 19.07.2007, 18:08

Hallo Nico,

klappt wunderbar. Ich habe allerdings <br style="clear:left;"> innerhalb des div-containers am Ende eingefügt.

Hast Du vielleicht auch noch eine Erklärung dazu? Ich will ja nicht dumm sterben

Gruß Jan

hero-master · 20.07.2007, 10:22

Zitat:

Zitat von <<< J >>>

Hast Du vielleicht auch noch eine Erklärung dazu? Ich will ja nicht dumm sterben

Ich kanns mal versuchen

Also floatest ja das Bild in dem Div. Somit könntest du das float direkt nach dem Bild wieder clearen, da der Text auch noch linksbündig daneben soll, wartest du eben mit dem Clearen bis nach dem Text. Ob du das nun in dem Div dann machst oder dahinter, ist dann recht egal

Nur eben solltest du es machen, bevor du ein neues Blockelement öffnest

buffy2511 · 20.07.2007, 18:16

Dazu muss ich jetzt auch nochmal was fragen: Sollte man eigentlich immer clearen, wenn man float verwendet?

Mich@el · 20.07.2007, 20:45

Hi Nadine!
Gute Frage!

In meinem schlauen Büchlein wird das folgendermaßen beschrieben:

Zitat:

Die Eigenschaft clear ist sehr wichtig. Erst mit ihr kann float seine volle Wirkung entfalten. Floatende Elemente werden sehr häufig eingesetzt, um CSS Layouts zu realisieren, und man hat nicht immer die volle Kontrolle über die Länge des Inhalts. Daher ist es immens wichtig, dass man die Floats entsprechend kontrolliert stoppt, damit z.B. der Footer nicht in die Navigation hineinragt, enn die Navigation länger ist als der dazugehörende Inhalt.

Also danach würde ich Deine Frage mit "JA" beantworten.

Grüße
Michael

buffy2511 · 22.07.2007, 19:14

Das leuchtet ein

Danke!