Vorneweg erstmal der absolute Geheimtip:
Ohne clear:both und ohne clear/clearfix-Klassen
In einer Box mit overflow: hidden umfließt ein Text ein Bild mit float: left perfekt !! Funktioniert natürlich auch mit anderen Containern. Achtung: Tabellenbullets ragen evtl. ins Bild hinein |
Durch IE6-Vermeidung wird vieles einfacher, aber nicht alles:
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 | |
Nur der Explorer zeigt den Balken 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 | |
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 Rand 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; |
horizontale scrollbar vermeiden | |
unwichtige Elemente, die über den rechten Rand ragen, sollen einfach abgeschnitten werden | overflow: hidden; |
Kombinatoren - trickreiche Helfer
natürlich erst so richtig ab IE7 :-)
Mehrfach-Klasse | |
.page.node-1 oder ul.node.view-content | gilt in Tags, die alle genannten Klassen enthalten, zB <ul class="node view-content node-1"> Nicht IE6 |
'>' Kombinator | |
.content > p {...} | Wirkt auf jeden ersten Absatze <p>, der direkt (und nicht verschachtelt) in Klasse "content" vorkommt. Nicht IE6 |
'*' Kombinator | |
.page * h2 | Umgekehrt zu '>': Wirkt auf jeden ersten Absatze <p>, der verschachtelt (und nicht direkt) in Klasse "content" vorkommt. Auch IE6 |
'+' Kombinator | |
.content + p {...} | Wie ">" - wirkt aber nur auf den ersten Absatz. Nicht IE6 |
' ' Kombinator ...der Normalfall ... | |
.content p {...} | Wirkt auf alle Absätze <p>, die irgendwo beliebig verschachtelt in .content stehen. |
Attributbedingt | |
img[align] img[align=left] img[align~=left] | Wirkt auf alle Bilder, die ein <img align="..."> haben. Jetzt muss es genau <img align="left"> sein. "Wort enthalten" -> auch align="top left" würde passen. |
Jedem Themer sei überdies ans Herz gelegt, ein Basistheme zu benutzen, was die meisten Standardhacks für IE bereits enthält. Man muss das Rad nicht neu erfinden.
Über weitere kluge Tipps bin ich dankbar - Klemens
