Stefan Ihringer: Content laeuft ueber DIV hinaus (Opera vs. IE)

Hallo!

Ich habe einen DIV mit prozentualer width und height versehen, damit er sich dem Browserfenster anpasst. Ferner hat er einen Rahmen und/oder Hintergrund, damit man mein Problem sieht:

<div style="position:absolute;top:100px;left:100px;
width:30%;height:30%;background-color:#404040;border:solid 1px white;">
Hier steht langer content... usw...
Hier steht langer content... usw...
Hier steht langer content... usw...
Hier steht langer content... usw...
Hier steht langer content... usw...
Hier steht langer content... usw...
</div>

Wenn ich nun das Fenster zu klein mache, bricht der Text natuerlich um. Nur behandeln IE und Opera das ganze auf unterschiedliche Art und Weise:

IE vergroessert den Kasten, Opera schreibt den Text einfach ausserhalb des Kastens weiter. Da ich aufgegeben habe, beiden Browsern das gleiche Verhalten beizubringen (ohne auf das alte Tabellengewurschtel zurueckzugreifen), ist nun meine Frage:

Welches Verhalten ist gemaess den CSS-Richtlinien richtig? Als Opera-Fan stehe ich natuerlich auf dessen Seite, aber das, was der IE macht ist irgendwie logischer.

Danke fuer eure Hilfe!
Stefan

  1. hi

    IE vergroessert den Kasten, Opera schreibt den Text einfach ausserhalb des Kastens weiter. Da ich aufgegeben habe, beiden Browsern das gleiche Verhalten beizubringen (ohne auf das alte Tabellengewurschtel zurueckzugreifen), ist nun meine Frage:

    Welches Verhalten ist gemaess den CSS-Richtlinien richtig? Als Opera-Fan stehe ich natuerlich auf dessen Seite, aber das, was der IE macht ist irgendwie logischer.

    nein, einmal mehr ist die scheinbare logik des IE auf dem Helzweg (wieso auch, wenn man eine Anpassung will, gibt's min-height.

    'overflow' hat ein defaultwert 'visible'....:

    visible
    This value indicates that content is not clipped, i.e., it may be rendered outside the block box.

    Grüße aus Bleckede

    Kai

    1. nein, einmal mehr ist die scheinbare logik des IE auf dem Helzweg (wieso auch, wenn man eine Anpassung will, gibt's min-height.

      Cool, danke fuer die schnelle Antwort. Nur leider kennt der IE (6) kein min-height. Grrr... ich weiss schon, wieso ich das letzte mal vor einem Jahr HTML angefasst habe :-)

      Kann der aktuelle Mozilla min-height?

      Stefan

      1. hi

        Kann der aktuelle Mozilla min-height?

        Mozilla kann, Opera kann

        Grüße aus Bleckede

        Kai

        1. Hallo,

          Kann der aktuelle Mozilla min-height?

          Mozilla kann, Opera kann

          Zumindest min-width kennt Mozilla 1.0 nicht: http://www.styleassistant.de/tips/beispiel66.htm.

          MfG, Thomas

          1. hi

            Zumindest min-width kennt Mozilla 1.0 nicht: http://www.styleassistant.de/tips/beispiel66.htm.

            schlechter Testcase:

            'min-width'
                Value:   <length> | <percentage> | inherit
                Initial:   UA dependent
                Applies to:   all elements except non-replaced inline elements and table elements
                Inherited:   no
                Percentages:   refer to width of containing block
                Media:   visual

            (bei max-width, min-height und max-height das gleiche)
            In CSS3 übrigens geändert.

            Grüße aus Bleckede

            Kai