CSS-Hack Google Chrome

Sowas braucht man normalerweise nicht. Chrome basiert auf der Webkit-Engine. Seiten, die auf anderen Webkit-Browsern wie z.B. Safari laufen und ordentlich aussehen, werden daher auch in Googles Browser Chrome korrekt dargestellt. Wer aber immer noch einen CSS-Hack für Chrome sucht, der sollte sich mal bei CSS-Hacks für Safari umsehen.

CSS Hack für IE6 (und davor)

Normalerweise versuche ich ja immer, Sachen, die sog. Browserhacks verwenden, zu vermeiden. Bisher hat das auch immer geklappt, aber heute hatte ich da ein ganz nerviges Problem mit Farbunterschieden bei Hintergrundgrafiken (PNG und JPG gemischt), welches sich zudem noch zwischen IE und Firefox beispielsweise unterschied. Hier blieb keine Alternative zu einem Hack.

Der wohl beliebteste CSS-Hack für den Internet-Explorer ist der sog. Star-HTML-Hack (oder Star-Hack oder Stern-Hack). Dieser wird von Internet Explorern bis zur Version 6.0 "unterstützt" und funktioniert folgendermaßen:

  #container{width:500px;}

  * html #container{
    width:400px;
  }

Oben in der ersten Zeile definiere ich eine Breite für das Element mit der ID "#container". Dies gilt für alle Browser. Die nächste Definition gilt nur für den IE und spricht ein "beliebiges Element, welches vom HTML-Element gefolgt wird" an. Definitionsgemäß ist das HTML-Element immer das erste/oberste in einem HTML-Dokument. Daher kann das normalerweise nie zutreffen. Der IE jedoch ignoriert einen Sternchen-Selektor vor dem html und interpretiert die CSS-Anweisungen.

Für den IE7 gibt es eine erweiterte Version des Star-Hacks, welcher ähnlich funktioniert:

  #container{width:500px;}

  *:first-child+html #container{
    width:400px;
  }

Wichtig hierbei ist der First-Child-Selektor, da Opera die Anweisungen sonst auch interpretiert.

CSS ist doof

Oder zumindest die Browser. Warum gibts eigentlich keine Werte für "normales Verhalten"? Gerade gestern habe ich in einem Anfall geistiger Umnachtung (ok, ich wollte nur etwas mehr Pep in eine Webseite bringen mit einer Prise jQuery) alle Elemente einer Liste mit display:none unsichtbar geschaltet...

...und mich hinterher gewundert, wieso ich die Dinger nicht mit display:normal wieder hervorzaubern konnte. Bis mich der (Geistes-)Blitz heute beim Sch... traf. Es heißt selbstverständlich display:list-item. Dusseliger Fehler meinerseits. Aber andererseits: Wenn ich sage "Zeige das normal an", dann mach das auch, Du du blöder Browser. Menno, ey!

TYPO3 Text mit Bild float-Phänomen

Gestern hatte ich ein hartnäckiges Problem mit Content Elementen (CE) des Typs "Text/Bild". Auf einer bestimmten Übersichtsseite wollte ich damit eine Artikelübersicht erstellen. Damit das auch aufgeräumt aussieht und sich leicht durch einen Laien pflegen lässt, wollte ich das Ganze einfach mit einfachen Elementen vom o.g. Typ aufbauen. Der Plan war, diesen Elementen feste Dimensionen (Höhe, Breite) mitzugeben und das Ganze dann per Floating zu positionieren. Soweit die Theorie. Die Praxis sah anders aus. css_styled_content baut in dem Element unten leider noch einen Div-Container "div.csc-textpic-clear" ein, der das Floating wieder aufhebt durch ein "clear:both". Dadurch werden die ganzen Content Elemente untereinander dargestellt.

Wenn man eine eigene Floating-Lösung verwenden will, dann muss bei dem Container "div.csc-textpic-clear" das Clearing wieder entfernt werden. Dies lässt sich erreichen durch den simplen CSS-Befehl "clear:none"

Dadurch hat man wieder Einfluss auf den Floatwert (Floating) bei Elementen des Typs "Text mit Bild".