Fehlermeldung: Beware of broken box size

  • Hallo Leute!
    Wenn ich diese Seite im Firefox-Browser öffne, springt die 5. Div aus der Content-Box und ordnet sich darunter ein.
    Ohne Rahmen ist alles ok.



    Ich habe die CSS mit CSS Lint.net überprüft, und die Warnmeldung bekommen: "Beware of broken box size | Using width / hight with border can sometimes make elements larger than you expekt"
    Wie kann ich die inneren Divs rahmen, ohne den Rahmen zu sprengen?


    Gruß!

  • Hallo


    Zitat

    Wie kann ich die inneren Divs rahmen, ohne den Rahmen zu sprengen?


    Nach dem normalen Box-Modell komme ich zur Zeit für die inneren div auf


    750 px width
    000 px padding
    010 px border
    050 px margin
    =
    810 px Gesamt


    bei einem umgebenden Element von 800 px Breite.


    Du wirst also width oder margin verringern müssen wenn border bestehen bleiben soll. Oder halt den umgebenden Container breiter machen.


    Gruss


    MrMurphy


    Nachtrag: Nebenbei solltest du dir Gedanken über die Schriftgröße machen. Abgesehen davon das für Bildschirme die Einheit pt ungeeignet ist sind 50pt höher als die des umgebenden Elements mit 80px.

  • Hi!
    Ich probiers gleich mal aus.
    Gruß!
    ... width, margin, Schriftgröße ändern hat nichts gebracht (welche Einheit ist geeignet für Bildschirme?),
    das Problem tritt auch nur bei FFox auf, im IE und MS-Edge ist alles ok.


    Gruß!

  • Hallo,


    der Hinweis auf die Schriftgröße hat mit deinem Problem nichts zu tun. Es ist mir halt nur aufgefallen, dass die Zahlen außerhalb der div angezeigt werden. pt ist für Drucker, also die Druckausgabe, geeignet. Für Bildschirme hingegen besser px, %, em, rem vw oder vh.


    Zitat

    ändern hat nichts gebracht


    Woher sollen wir wissen was du geändert hast.


    Zitat

    im IE und MS-Edge ist alles ok.


    Dazu müssten wir den gesamten Quelltext kennen. Wenn deine Doctype-Angaben ähnlich chaotisch wie deine CSS-Angaben sind oder komplett fehlen schickst du die IE wahrscheinlich in den Quirksmode. Damit kann der IE gleichzeitig ein anders Box-Modell benutzen. Damit wiederum werden die div zwar wie von dir erwartet angezeigt, der Quelltext ist trotzdem Schrott. Ich bin jedoch vom klassischen Box-Modell ausgegangen.


    Gruss


    MrMurphy

  • Hallo


    wenn ich in deinem Quelltext hier



    den Wert von


    CSS
    margin: 5px ;


    auf


    CSS
    margin: 4px ;


    ändere werden die 5 Container nebeneinander angezeigt. Keine Ahnung, was du da nicht hinbekommst.


    Zitat

    Chaotisch? Gib mir nen Tipp, das Chaos zu ordnen!


    Habe ich doch bereits. Damit meine ich Containern eine Größe vorzuschreiben und anschließend mit Inhalt zu füllen, der größenmäßig nicht passen kann. Die Gesamtbreite der 5 inneren Container oder die Buchstabengröße.


    Zitat

    Das IST der gesamte Quelltext.


    Dann ist die Seite recht langweilig. Fünf Container mit den Zahlen 1 bis 5.


    Spaß beiseite: Wenn du nicht konkret schreibst was du geändert hast und das dann nicht funktioniert kann ich dir dazu auch keine Hilfe geben. Mit "hat nichts gebracht" kann niemand etwas anfangen.


    Gruss


    MrMurphy

  • Hi MrMurphy!

    Dann ist die Seite recht langweilig. Fünf Container mit den Zahlen 1 bis 5.

    Langweilig? Stimmt. Mehr Quelltext sollte es auch nicht sein. Ich will nur dieses Div-Problem loswerden.
    Ich habe die CSS in http://csslint.net/ überprüfen lassen.
    Warnmeldung: Beware of broken box size. | Using hight with border can sometimes make elements larger than you expect.
    Für mich bedeutet diese Meldung, ich muss die borders anders anlegen.
    Habs ohne padding/margin noch mal durchgespielt und die Maße der Divs genau an den Container angepasst.
    Mit border fliegt mir alles auseinander(man siehts, wenn man das FF-Fenster kleinzoomt).
    Ohne border ist alles stabil.
    Es muss eine Lösung geben. Hat ja alles schon mal funktioniert, allerdings mit andererm DOCTYPE:

    Bin ratlos.
    Gruß!

  • Hallo,


    jetzt hat es bei mir geklickt. Deshalb habe ich diesen Beitrag komplett überarbeitet.


    Zitat

    man siehts, wenn man das FF-Fenster kleinzoomt


    Beim Chrome und Opera auch, beim IE nicht, wie du richtig erkannt hast.


    Zitat

    Beware of broken box size. | Using height with border can sometimes make elements larger than you expect.


    Das hatte ich zunächst falsch verstanden, weil ich über das Phänomen noch nie gestolpert bin.


    Die Meldung ist ein Hinweis darauf, das ein Rand (border) nicht unbedingt die Größe hat, die im CSS hinterlegt ist. Und zwar auch dann, wenn der Rand in Pixel (px) angegeben wird.


    Wenn aus einer Webseite herausgezoomt wird (der Inhalt also kleiner dargestellt wird) wird ein Rand (border) immer größer dargestellt. Und zwar auch, wenn er wie in deinem Beispiel in Pixel angegeben wird.


    Das scheint aber kein Bug oder Fehler zu sein, sondern ein zulässiges Verhalten der Browser. Auch wenn unserein den Sinn wahrscheinlich nicht nachvollziehen kann - ich jedenfalls nicht.


    Zumindest nachvollziehen läßt sich die Breite vom Rand im Firefox: Rechte Maustaste in die Seite - Element untersuchen (Q) - im Quelltextfenster einen der 5 div anklicken - im Fenster rechts daneben "Box-Modell" - in die Seite rein- und rauszommen. Dann kann schön nachvollzogen werden, wie breit der Rand tatsächlich gerechnet wird.


    Offensichtlich stimmt die Pixelanzahl vom Rand nur bei 100% Zoom.


    Zitat

    Es muss eine Lösung geben.


    Benutze das Border-Box-Modell.


    CSS
    * {
       box-sizing: border-box;
    }


    Dann besteht die Gesamtbreite eines Containers nur aus width plus margin. Die beiden sind von dem Phänomen offensichtlich nicht betroffen. padding und border werden von der width abgezogen. Ob der Browser die etwas anders berechnet als im CSS vorgegeben spielt dann keine Rolle. Das läßt sich auch einfacher berechnen, wenn Container nebeneinander angeordent werden sollen.


    Gruss


    MrMurphy

  • Dankeschön, MrMurphy!
    Das hilft mir nun wirklich weiter!
    ... Ich starte einen neuen Versuch mit Border-Box-Modell! ...
    Gruß!
    p.S.: toll, dass Du nochmal reingeschaut hast!

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!