Skip to Content

CSS Trickkiste

Nicht nur für den IE - obwohl der Internet Explorer ja auf unabsehbare Zeit unser spezieller Liebling bleiben wird (der IE6 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.
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

Kommentar hinzufügen

Der Inhalt dieses Feldes wird nicht öffentlich zugänglich angezeigt.
  • Internet- und E-Mail-Adressen werden automatisch umgewandelt.
  • Zulässige HTML-Tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <drupal6>, <java>, <javascript>, <php>. The supported tag styles are: <foo>, [foo]. PHP source code can also be enclosed in <?php ... ?> or <% ... %>.

Weitere Informationen über Formatierungsoptionen

CAPTCHA
Nerd oder Robot ?
audiov_suel_: