zisslaweng.de

 Home    CSS    PHP    HTML    JavaScript    Allgemein    Sitemap   exemption-filter

Box

Ein Streifen 300 px Länge
Ein Streifen 260 px Länge

Eine Box mit den Werten: width:260px; border:5px; padding:15px;

Diese Box hat laut CSS Definition aussen eine Breite von 300px und einen beschreibbaren Teil von 260px. Wenn Boxbreite = grüner Streifen verwenden Sie gerade einen Browser, der das Box Model korrekt anwendet.

Falls die Box nur so breit ist wie der rote Streifen benutzen Sie wahrscheinlich den MS Internet Explorer mit fehlerhaften Umsetzung. Das lässt sich mit einem Work-around (hack) beheben. Sie sollten das bei den Stylesheets Ihrer eigenen Seiten gegebenenfalls berücksichtigen.

Unten die gleiche Box mit einem Stylesheet, welches den Box-Model-Hack anwendet (entwickelt von Tantek Çelik). Damit sollte jetzt auch der IE die Box korrekt darstellen.

Ein Streifen 300 px Länge
Ein Streifen 260 px Länge

Eine Box mit den Werten: width:260px; border:5px; padding:15px;

Stylesheet mit Box-Model-Hack

	
<style type="text/css" media="screen">
#box_2 { 
    width:260px; border:5px; padding:15px; border-color:#f16733; 
    border-style:solid;}
* html #box_2 { width:300px; w\idth:260px;}
</style>

und was passiert da?

Interessant nur die hinterlegte Zeile. Der "Star-HTML-Hack": Der " * " steht in CSS für jeden beliebigen Bezeichner. Der Selector ist gültig, nur... es gibt kein Element, auf das dann "html" folgt. Alle Browser werden es ignorieren, ausser dem IE! Der setzt jetzt die Boxbreite auf 300px, das passt für die Versionen IE 5.x

Der zweite Eintrag der "Tan-Hack (Modified Simplified Box Model Hack)". Der Eintrag wird auf Grund des enthaltenen " \ " nur vom IE 6 interpretiert und setzt die Breite wieder auf die richtigen 260px (= Korrektur der Korrektur, da er im Standard-Mode ja korrekt arbeitet).
Der " \ " kann an beliebiger Stelle stehen, ausser vor den Buchstaben a..f, dort würde es hexadezimal interpretiert werden
Achtung: Wenn Sie den Browser (auf Grund falscher DTD) in den Quirks-Modus gebracht haben, nützt dieser Hack absolut nicht.

 

 Dies ist nicht der einzige Fehler/Browser, der eine Sonderbehandlung erfordert. Wollen Sie ältere Browser wie Netscape 4, IE 3 und 4 oder Konqueror 2 ausschliessen? Interpretiert der IE für Macintosh Ihre Stylesheets nicht richtig? Meist gibt es bereits Lösungen, versuchen Sie mal den Link unten als erste Anlaufstelle.

Eine umfassende Übersicht über Hacks, work-arounds finden Sie auf der Seite css-discuss

Logo