Webdesign mit CSS

Webdesign mit CSS

Posts 1-10 of 10
  • Dietrich Koch
    Dietrich Koch
    The company name is only visible to registered members.
    Welcher Browser hat Recht?
    Ich bin über ein recht einfaches CSS-Problem gestolpert, das mich an meinem Verständnis von CSS stark zweifeln ließ, bis ich dann auf die naheliegende Idee kam, es in allen gängigen Browsern zu testen. Hier das Beispiel:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title></title>
    </head>
    <style>
    #a{width:240px;background-color: green;}
    #al{width:50%;background-color:#ccc;float:left;}
    #ar{width:100px;float:left;background-color:#eee}
    </style>
    <body>
    <div id="a">
    <div id="al">irgendein Text im linken Bereich
    </div>
    <div id="ar">irgendein anderer Text, der im rechten Bereich platziert wird. Wenn die Bereiche gefloatet werden, schrumpft offenbar der a-container auf die Höhe 0
    </div>
    </div>
    </body>
    </html>
    Ich hatte erwartet, dass der linke und der rechte Bereich auf einen grünen Hintergrund liegen, jedoch war der FF dazu nicht zu bewegen - der a-div hatte die Höhe 0 -, nur wenn ich das Floaten abschaltete hatte der a-Container wieder die erforderliche Höhe. Alternativ dazu konnte man den Hintergrund wieder hervorkitzeln, wenn man a die Eigenschaft overflow:hidden gab, was ich nun gar nicht mehr verstand.
    Dies wollte ich eigentlich so als Problem ins Forum stellen, dann stellte ich fest, dass der IE und der Opera sich tatsächlich so verhalten, wie ich es erwartete, während Chrome und Safari in gleicher Weise wie der FF zicken.
    Was ist nun eigentlich standardkonform und warum kann man mit overflow:hidden das erwartete Verhalten erzwingen?
    Freue mich auf Eure Analysen und Aufklärung
    Dietrich
    • 20 Jun 2011, 09:38 am
  • Post visible to registered members
  • Dietrich Koch
    Dietrich Koch
    The company name is only visible to registered members.
    Re^2: Welcher Browser hat Recht?
    Hallo Maren,
    nun kommt für mich ein bisschen mehr Klarheit herein, wenn auch nicht vollständig. Dass das umgebende Element seine Höhe "vergisst", wenn man seine inneren Elemente floaten lässt, ist schon merkwürdig. Jedenfalls ist mir a{float:left;} etwas einleuchtender als overflow:hidden. Nach Eric Meyer gilt die Regel, dass die Größe eines umgebenden Floats soweit angepasst wird, dass enthaltende floats ganz umgeben werden.
    Bleibt noch offen, welcher Browser nun regelkonform ist, aber das ist vielleicht nicht klärbar.
    Den IE7 kann ich nur in der Kompatibilitätsansicht des IE8 testen und die verhält sich hier so wie der IE8.
    Vielen Dank für deinen hilfreichen Beitrag
    Dietrich
    • 20 Jun 2011, 11:37 am
  • Klaus Scharwächter
    Klaus Scharwächter    Group moderator
    The company name is only visible to registered members.
    Re^3: Welcher Browser hat Recht?
    Hi Dietrich,

    Dietrich Koch schrieb:
    Dass das umgebende Element seine Höhe "vergisst", wenn man seine inneren Elemente floaten lässt, ist schon merkwürdig. Jedenfalls ist mir a{float:left;} etwas einleuchtender als overflow:hidden. Nach Eric Meyer gilt die Regel, dass die Größe eines umgebenden Floats soweit angepasst wird, dass enthaltende floats ganz umgeben werden.
    hier zunächst mal ein Link mit einer ordentlichen Erklärung von Float/Clear: http://www.css-technik.de/css-examples/219_9/

    Das ein den Float umgebendes Element vergißt seine Höhe nicht, es hat ja i.d.R. keine zugeordnet bekommen, damit es sich durch die Default-Einstellung height:auto; vertikal dynamisch an wachsende Inhalte anpassen kann.

    Man sollte auch nicht vergessen, dass man durch den Float ein Element aus dem normalen Textfluß entfernt. Das ist so ähnlich wie bei einem absolut positionierten Element das von den anderen Elementen ignoriert wird.
    Im Unterschied dazu sehen sich die Elemente beim Float wenigsten "ein bisschen".
    Texte weichen dem Float aus, die Box erstreckt sich jedoch auch unter dem Float!

    Durch das Clear signalisiert man dem umschließenden Element u.a. ja erst:"Da ist was, was du bei deiner Darstellung mit berücksichtigen mußt."
    Es sieht den Float ja sonst nicht, weil das gefloatete Element nicht im Textfluß ist.

    overflow:hidden; ist imho eine untaugliche Methode zum Einschließen von Floats, weil die overflow-Eigenschaft in der Spezifikation zu unscharf formuliert ist.
    Das führt dazu, dass es auch bei modernen Browser gerne mal zu überraschenden Fehldarstellungen kommt.

    Gruß
    Klaus
    This post was modified on 20 Jun 2011 at 02:13 pm.
    • 20 Jun 2011, 2:12 pm
  • Marc Haunschild
    Marc Haunschild    Premium Member
    The company name is only visible to registered members.
    Re^4: Welcher Browser hat Recht?
    Hmmm... - hatte ich nicht vor ein paar Tagen was zu BFCs geschrieben? Wo war das denn? - Ist bestimmt das neue XING schuld, dass ich den Beitrag nciht mehr finden! Wer den gelesen hat, kann ihn ja hier verlinken.

    Jedenfalls kurz gesagt: ich würde mich zwischen clearfix oder floaten des umgebenden Elementes (in Deinem Fall #a) entscheiden - hängt ein wenig vom restlichen Layout ab, was in der Anwendung praktischer ist.

    Alles andere haben meine Vorredner bereits genannt. Genug Futter für Google also. :-)

    Den von Klaus geposteten Link verbreite ich auch ständig. Den und andere findest Du auch unter http://www.mhis.de/vhs/links.htm - dort ist auch der unten genannte Artikel von molily verlinkt und weiteres.

    Im übrigen kann ich das Buch "Fortgeschrittene CSS-Techniken" aus dem Galileo-Verlag empfehlen. Und einen Artikel von molily (guter Mann!),

    Marc
    • 20 Jun 2011, 2:55 pm
  • Dietrich Koch
    Dietrich Koch
    The company name is only visible to registered members.
    Re^5: Welcher Browser hat Recht?
    Dank an alle für die Beiträge und Links.
    Besonders hilfreich war mir auch noch einmal der Hinweis darauf, dass floats die Elemente aus dem normalen Fluss nehmen. Mein Denken war mehr: gefloatet wird immer, float sagt nur wie. Stimmt ja auch ein bisschen wie einige Browser zeigen.
    Meine CSS-Bibel ist Eris A.Meyer "CSS Das umfassende Handbuch". Manchmal ist es vielleicht zu umfassend, so dass man das einfache nicht mehr findet.
    Aber was sind denn BFCs (Berliner Fußball Clubs?), da steh ich auf dem Schlauch.?
    Dietrich
    • 20 Jun 2011, 4:06 pm
  • Marc Haunschild
    Marc Haunschild    Premium Member
    The company name is only visible to registered members.
    Re^6: Welcher Browser hat Recht?
    Hallo Dietrich,

    die Abkürzung hilft bei Google tatsächlich nicht weiter. Gemeint war Block Formatting Context (in dem Artikel von molily ist das aber auch erklärt).

    Gruß,

    Marc
    • 20 Jun 2011, 4:09 pm
  • Klaus Scharwächter
    Klaus Scharwächter    Group moderator
    The company name is only visible to registered members.
    Re^7: Welcher Browser hat Recht?
    Marc Haunschild schrieb:
    Gemeint war Block Formatting Context (in dem Artikel von molily ist das aber auch erklärt). >

    genau!
    In dem von Marc genannten Buch "Fortgeschrittene CSS-Techniken" (was imho zu den absoluten "must haves" gehört!) wird das auch gut erläutert!
    • 20 Jun 2011, 5:15 pm
  • Dietrich Koch
    Dietrich Koch
    The company name is only visible to registered members.
    Re^8: Welcher Browser hat Recht?
    Die beiden Artikel haben einen clearfix in meinem Floatverständnis erreicht, hoffe ich. Deshalb gebe ich hier noch einmal die Links an verbunden mit einer heißen Empfehlung für alle mit ähnlichen Problemen:
    http://www.css-technik.de/css-examples/219_9/
    http://molily.de/weblog/css-floats-einschliessen

    Möglichst in dieser Reihenfolge lesen!
    Dietrich
    Achso, also Opera und IE haben unrecht, sind wohl ihrer Zeit voraus.
    This post was modified on 21 Jun 2011 at 09:19 am.
    • 21 Jun 2011, 09:18 am
  • Marc Haunschild
    Marc Haunschild    Premium Member
    The company name is only visible to registered members.
    Re^9: Welcher Browser hat Recht?
    Hallo Dietrich,

    Dietrich Koch schrieb:

    Achso, also Opera und IE haben unrecht, sind wohl ihrer Zeit voraus.
    Ohne es überprüft zu haben, rate ich mal wild: vermutlich hast Du den IE in den Quirksmodus geschickt (kann man mit den Entwicklertools oder wie die für den IE heißen) überprüfen.

    Was der Opera macht, weiß ich nicht. Vielleicht dasselbe wie der IE.

    Gruß,

    Marc
    • 21 Jun 2011, 7:18 pm