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