CSS Trickkiste

Nicht nur für den IE - obwohl der Internet Explorer ja auf unabsehbare Zeit unser spezieller Liebling bleiben wird (IE < 9 ist immer noch in 20% aller Büros vertreten und scheint schwerer abzuschaffen als die Todesstrafe).

Aber ohne IE hätte man hier nur das halbe Lesevergnügen ...

IE6-8 ? Beschränkung
IE kann maximal 31 CSS-Dateien bearbeiten. Der Rest wird ignoriert.
IE<8(?) kann nur maximal 4096 Anweisungen je Datei haben.
In Drupal in admin/settings/performance die CSS-Dateien optimieren !
Rollbalken erzwingen
Bei Seitenwechsel "springt" der Inhalt, wenn rechts mal ein Rollbalken da ist - mal nicht. Nur der Explorer zeigt den Balken am rechten Fensterrand immer an und verhindert ein optisches Hüpfen ? so geht's für alle Browser:
html {height: 101%;}
Kein Select-Rahmen in Firefox
Damit umrahmt Firefox ein geklicktes Element nicht mehr:
a:focus { outline:none;}
Aktives Eingabefeld hervorheben
zB. Gelber Hintergrund im aktuellen Eingabefeld:

#myTextArea:focus { background:#FFD; }
min-height ? IE6/7
außer der min-height Angabe brauchts noch 2 weitere Zeilen (ein echter Hack)
 min-height:250px;
 height:auto !important;
 height:250px;
min-width ? IE6/7
Fehlanzeige!
 
bg-image in <li> ? IE6
wird erst sichtbar, wenn <ul> "position: rel" ist:
ul {position: relative}
layout mit 100% H?he
Wenn der Hauptbereich immer bis zum unteren Rand des Browserfensters gehen soll.
Info hier
html, body { height: 100%; }
.page {
 min-height: 100%;
 height: auto !important;
 height: 100%;
}
Rollover-Effekt bei Bildern
Idee: Zeige bei Rollover das Bild etwas blasser.
Problem: jeder Browser (IE 6,7,8) will was anderes !!!!
#anywhere a img {
 -ms-filter: "alpha (opacity=100)"; /* IE8 */
 opacity: 1;
 filter: alpha(opacity=100); /* IE6+7 */
}
#anywhere a:hover img {
 -ms-filter: "alpha (opacity=75)"; /* IE8 */
 opacity: 0.7;
 filter: alpha(opacity=70); /* IE6+7 */
}
"Rand" unter img entfernen
<img> haben fast immer einen Abstand unter dem Bild. So ist das Bild 100% hoch:
img { line-height: 0; }
 
bg-color ? IE6
manchmal wird bg-color in IE6 nicht angezeigt. Dies hilft:
h3 { background-color: #876;
     position: relative;
img-float
Ohne clear:both;
In einer Box mit overflow: hidden umfließt ein Text ein Bild mit float: left perfekt !!
Aufzählungszeichen verschoben
So sollte es sein:    Aber so sieht's aus:
Im umschließenden <div> dieses setzen:
  display: inline-block;

 

Einen Blick wert: Little Boxes