mcmoe: "border" - welcher browser hält sich hier an die empf. des W3C?

hallo gemeinde,

wer öfters mit CSS-rahmen arbeitet (z.b.: style="border 1px solid black;") wird vielleicht bemerkt haben, dass die gängigen browser diesbezüglich sehr unterschiedliche ansichten haben.

man nehme ein element, z.b. einen div-layer und versehe ihn mit einem css-rahmen...
preisfrage: wird der rahmen ausserhalb des layers gezeichnet, sodass sich die gesamtweite um die rahmenbreite erhöht, oder wird der rahmen nach ihnen verlegt, aber gegebenenfalls inhalt abgeschnitten?

in der CSS1-recommendation des W3C habe ich zu diesem thema nichts brauchbares gefunden, es wird einfach nur von "borders" geredet, ohne deren verhalten näher zu definieren...

folgende browser habe ich getestet:

IE5, IE6: border nach innen, inhalt wird abgehackt
mozilla 0.9.7, Opera5: border nach aussen, die totalweite des elements verändert sich

...wer hat denn nun recht???

gruß,
mcmoe

  1. Hallo,

    in der CSS1-recommendation des W3C habe ich zu diesem thema nichts brauchbares gefunden, es wird einfach nur von "borders" geredet, ohne deren verhalten näher zu definieren...

    auf http://www.w3.org/TR/REC-CSS2/box.html#box-dimensions und auf
    http://www.w3.org/TR/REC-CSS2/visuren.html#containing-block sind
    einige Infos dazu und da steht (sinngemäß) ganz klar, dass ....

    IE5, IE6: border nach innen, inhalt wird abgehackt

    dieser Browser CSS nicht vernünftig kann.

    mozilla 0.9.7, Opera5: border nach aussen, die totalweite des elements verändert sich

    diese Browser es richtig machen.

    Viele Grüße,
    Stefan

    1. Moin!

      da steht (sinngemäß) ganz klar, dass ....

      IE5, IE6: border nach innen, inhalt wird abgehackt

      dieser Browser CSS nicht vernünftig kann.

      Diese Trauergeschichte hat natürlich einen Anfang, der sicherlich irgendwo im IE 3 oder IE 4 begründet liegt. Damals war CSS-mäßig eben alles im Fluß (obwohl das aus Sicht des W3C bestimmt nicht so war), und der einmal gemachte Fehler bei MS, die Borders von der Width abzuziehen, wurde tapfer durchgehalten bis zur Version 6.

      Aber glücklicherweise gibst den standards-compliant Mode im IE6 - da ist dann alles so, wie es sein soll. Nur hilft das dem freundlichen Webdesigner überhaupt nicht, weil der IE 5 auch noch sehr verbreitet ist, und in dieser Hinsicht leider immer falsch rechnet.

      Was bleibt als Alternative?

      Entweder ins fragliche Element eine width-breite Grafik integrieren, die im IE das Element passend breiter macht. Ist meist nicht sehr schön, am besten ist es, wenn ein ohnehin zu benutzendes Designelement dafür herhalten kann.

      Oder Schachtelung:
      <div style="width:100px; padding:0;">
      <div style="padding:10px;">Inhalt</div>
      </div>

      Das paßt dann in allen Browsern. Es ist aber trotzdem ein Krampf.

      - Sven Rautenberg

      1. Moin

        Was bleibt als Alternative?

        Ergänzend dazu kommt noch der sog "box model hack":
        http://www.tantek.com/CSS/Examples/boxmodelhack.html

        Thomas J.

        1. Re-Moin!

          Was bleibt als Alternative?

          Ergänzend dazu kommt noch der sog "box model hack":
          http://www.tantek.com/CSS/Examples/boxmodelhack.html

          Diesen Hack lehne ich ab. Er basiert auf der Annahme, daß IEs mit fehlerhafter CSS-Breite eine geschweifte Klammer im Quelltext als Ende der CSS-Regel betrachten, so daß man vorher die IE-Breite setzt, und hinterher die korrekte CSS-Breite.

          Interessanterweise zeigen denn auch alle IEs (5.0, 6.0), die ich probiert habe, die W3C-Bilder mit den Links zu den Validatoren unten nicht an.

          Die Tatsache, daß sich künftige Versionen plötzlich unerwartet teilweise an die Regeln halten könnten, und damit dann alles wieder versauen würden, macht diesen Hack zu einer Zeitbombe. So eine Zeitbombe ist mit der Einführung des Mozilla/Netscape 6 auch hochgegangen, als document.layers plötzlich kein Kriterium für "Ich bin ein Netscape" war, aber die dummen Skripte den User-Agent abgefragt haben und auch bei Version 6 zur Ansicht gelangten, document.layers verwenden zu müssen.

          Sowas sollte nicht noch einmal passieren! Deshalb: Vorsicht bei Hacks.

          - Sven Rautenberg

          1. hi

            Die Tatsache, daß sich künftige Versionen plötzlich unerwartet teilweise an die Regeln halten könnten, und damit dann alles wieder versauen würden, macht diesen Hack zu einer Zeitbombe. So eine Zeitbombe ist mit der Einführung des Mozilla/Netscape 6 auch hochgegangen, als document.layers plötzlich kein Kriterium für "Ich bin ein Netscape" war, aber die dummen Skripte den User-Agent abgefragt haben und auch bei Version 6 zur Ansicht gelangten, document.layers verwenden zu müssen.

            auch beim IE ist die Zeitbombe hochgegangen! Sieh dir mal Seiten an, die es einerseits für nötig halten einen gültigen DOCTYPE anzugeben, aber sich auf den Bug verlassen. Und Schuld ist der IE6...
            Grundsätzlich sollte man entweder bei jedem Browser der neu rauskommt nachsehen, ob noch alles passt oder sich nicht auf Bugs verlassen! Ich selbst habe mir übrigens angewöhnt wenn nix allzu schief ist gar nicht auf dieses Gefrickel einzugehen. Dafür ist es aber wichtig, sein Layout von zerstückelten Bildern frei zu halten!

            gruss Kai