Box Model Hack Opera ausschließend

[Sven]

Hola,

folgendes liegt vor:

+---------------+ +---------------------------------------+
| #leftcol      | | Linkes <div> gefloatet. padding=10px  |
| +-----------+ | | In dem <div> ist noch ein div, dessen |
| | .start    | | | padding nochmals 5px groß ist. Das ge-|
| |           | | | samte Ding links soll inklusive aller |
| |           | | | paddings (margins sind überall 0) 212 |
| +-----------+ | | px breit sein. Macht also nach korrek-|
|               | | tem Boxmodell eine eigentliche Breite |
+---------------+ | von 212px-2*10px=192px. IE-Bug berück-|
                  | sichtigt, schönen Box Modell Hack be- |
                  | nutzt, eigentlich müsste alles super sein.
                  +---------------------------------------+

#leftcol {
    float: left;
    width: 212px;
    padding: 10px;
    margin: 0;

voice-family: ""}"";
    voice-family:inherit;
    width: 192px;
}

#rightcol {
    margin: 0 0 0 212px;
    padding: 0;
}

Von wegen! Zwar sieht es in IE 5, 6 (alles quirksmode) sowie Mozilla zwar gut aus, aber auch nur da - Opera7 verhält sich im Quirksmode anscheinend so wie der IE sich verhält, nur wirkt bei ihm ja der Boxmodelhack ja nicht, da er das CSS einwandfrei interpretiert.

Was tun?

Grüße,

derSven

[Orlando]

Hi Sven,

Zwar sieht es in IE 5, 6 (alles quirksmode) sowie Mozilla zwar gut aus, aber auch nur da - Opera7 verhält sich im Quirksmode anscheinend so wie der IE sich verhält, nur wirkt bei ihm ja der Boxmodelhack ja nicht, da er das CSS einwandfrei interpretiert.

du kannst Opera 7 mittels box-sizing: umschalten

http://www.opera.com/docs/specs/#css-3
 http://www.w3.org/TR/css3-box/#the-box-width
 http://www.quirksmode.org/css/box.html
 http://www.geocities.com/seanmhall2003/css3/compat.html

falls der Doctype-Switch nicht ausreicht:

http://www.opera.com/docs/specs/doctype/

Grüße,
 Roland

[Sven]

Hi Roland (/Orlando),

du kannst Opera 7 mittels box-sizing: umschalten

hmm... *werkel*

#leftcol {
    float: left;
    width: 212px; /* IE 5, IE 5.5, IE 6 */
    padding: 10px;
    margin: 0;

voice-family: ""}"";
    voice-family:inherit;
    width: 192px; /* für Mozilla, Opera & more */
    box-sizing: content-box; /* für Opera's Quirks mode (umschalten ins W3C Box Modell) */
}

juhu - jetzt ist die Box von links bis rechts genau 212px breit - und zwar bei allen drei browsern 8)

http://www.opera.com/docs/specs/#css-3
 http://www.w3.org/TR/css3-box/#the-box-width
 http://www.quirksmode.org/css/box.html
 http://www.geocities.com/seanmhall2003/css3/compat.html

sehr interessante dokumente. Lesenswert! :)

falls der Doctype-Switch nicht ausreicht:
 http://www.opera.com/docs/specs/doctype/

Ich bleibe ganz gerne im Quirksmode, da ich mir (ich kann es bis jetzt noch nicht nachvollziehen) irgendwann (unsinnigerweise) den IE6 angeschafft habe und mit dem Quirksmode den IE6 etwa den IE5 nachmachen lasse - und somit habe ich ja dann schon mehr als 80% der benutzerbrowser erreicht, wenn mein Design im IE6Quirks so aussieht, wie es in richtigen Browsern aussieht.

Vielen Dank für die Links,

derSven

[Cyx23]

Hallo Sven,

voice-family: ""}"";
    voice-family:inherit;

das dürfte in einigen Browsern Parsing (und ggf. Style-)fehler erzeugen.

Vielleicht findest du z.B. hier:http://www.lipfert-malik.de/webdesign/tutorial/bsp/css-weiche-filter.html noch andere Möglichkeiten wie etwa * html .. für die IEs.

Grüsse

Cyx23