nicht angemeldet
Float-Probleme im Firefox
Hallo CSS-Freunde,
ich setzte mich zur Zeit intensiv mit dem Thema CSS-basierte-Layouts auseinander.
Prinzipiell ist das ne super Sache, allerding manchmal auch echt nervtötend aufgrund der vielen verschiedenen Browserdarstellungen, bzw. Browserbugs.
Aber was erzähle ich, das wisst ihr ja sicher.
Nun habe ich zur Zeit ein Problem bei dem ich nicht weiter komme. Ich suche schon seit geraumer Zeit eine Lösung (Google, Foren, ...) Jedoch werde ich nicht fündig, vielleicht auch weil ich nicht dir richtigen Stichwörter finde.
Wenn ich mehrfach verschachtelt den float-Befehl anwende und dann einen clear-Befehl einsetze, stell mein Firefox (2.0.0.2) alle folgenden Elemente unterhalt des äußersten gefloateten Bereich dar.
Normal (IE) Problem (FF)
-------------------------- --------------------------
| f | | f | | f | | f |
| l | float: | ... | l | | l | float: | ... | l |
| o | left | ... | o | | o | left | ... | o |
| a | clear: | a | | a | | a |
| t | left | t | | t | | t |
| : | ... | : | | : | | : |
| l | | r | | l | | r |
| | | | | | clear: | |
| | | | | | left | |
| | | | | | ... | |
| | | | | | | |
-------------------------- --------------------------
Hier noch ein bisschen Quellcode:
(bildet den äußeren Rahmen, zusätzliche float-Verschachtelung im Bereich haupt/innenhaupt)
CSS:
body {
color: black; background-color: white;
font-size: 100.01%;
font-family: Arial,Helvetica,sans-serif;
margin: 0; padding: 5px 0;
text-align: center; /* Zentrierung im Internet Explorer */ }
div#seite{
text-align: left; /* Seiteninhalt wieder links ausrichten */
margin: 0 auto; /* standardkonforme horizontale Zentrierung */
width: 970px;
padding: 0;
background: #ffffff url(background.gif) repeat-y;
border: 1px solid #AAA; }
div#links{ float: left; width: 185px; }
div#rechts{ float:right; width: 185px; }
div#innen{ margin: 0; padding: 5px; }
div#haupt{ }
* html div#Inhalt {
height: 1em; /* Workaround gegen den 3-Pixel-Bug des Internet Explorer bis Version 6 */
margin-bottom: 0; }
div#innenhaupt{ margin: 0 185px; padding: 10px; }
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<html>
<head>
</head>
<body>
<div id="seite">
<div id="links">
<div id="innen"> ... </div>
</div>
<div id="rechts">
<div id="innen"> ... </div>
</div>
<div id="haupt">
<div id="innenhaupt"> ... </div>
</div>
</div>
</body>
</html>
Vielen Dank im Vorraus für eure Hilfe.
Gruß Leo
-
Hallo,
Ich suche schon seit geraumer Zeit eine Lösung (Google, Foren, ...) Jedoch werde ich nicht fündig, vielleicht auch weil ich nicht dir richtigen Stichwörter finde.
Vielleicht hilft dir das: Grundlagen für Spaltenlayout mit CSS (SELFHTML-Weblog)
Achja Stichwörter:
• clear
• lokal
• globalMir freundlichen Grüßen, Daniel