Hier finden Sie alle Beiträge welche dem Begriff "CSS" zugeordnet sind.
Norwegen – sehr viel Gegend, viel Natur, viele kreative Köpfe (ja, der Billigmöbel- Konzern da oben wird auch von vielen Norwegern mit Ideen versorgt) – aber Aufstand und Revolte kennt man von da eher kaum.
Umso mehr sollte es jeden aktiven Webdesigner freuen das ausgerechnet aus dem hohen Norden der wohl schärfste Protest gegen das Redmonder Relikt namens “Internet Explorer 6″ (IE6) kommt!
Viele der führenden Websites Norwegens blenden seit neuersten eine “Warnmeldung” ein wenn deren Site mit dem IE6 geöffnet wird!
Heise online berichtete – in diesem Bericht wird übrigens auch der IE Death March erwähnt.
Bitte nicht falsch verstehen: wenn die IE6- Plage das WWW verlassen hat sind wir einer der Ersten die eine Flasche Sekt köpfen, im Kreise tanzen und voller Freude uns vor den Mitarbeitern bis auf die Knochen blamieren!
Der IE6 ist nun fast ein Jahrzent alt. Beinahe alle Macken dieses “Browsers” (die Anführungszeichen sind hier bewusst so gesetzt) sind bekannt und es gibt großteils Gegenmittel.
Die neuere Generationen der Microsoft Internet Explorer versprechen Besserung – und halten sie teilweise auch ein.
Warum da nicht abwarten bis der IE6 den selben Weg geht wie der IE5.5 oder gar der IE5 – selbständige Auflösung. Dank der rigorosen Update- Politik von Microsoft kann dies ja auch nicht mehr lange dauern.
Wegen Unfähigkeit der Software den meist unbedarften User geiseln sollte nicht die Lösung sein.
Und für alle Fachkundigen noch ein kleiner Gruß: #msie6 {position:absolute; left:0; bottom:-5000px;}
P.S.: Obwohl viele Experten und Test vor Kleinst- Autos bez. Sicherheit warnen – es sind viel davon unterwegs und werden vielfach neu gekauft!
Listen – ob geordnete oder ungeordnete – sind vielfach einsetzbare Elemente. In vielen Fällen semantisch korrekt, aber allemal praktisch zur Formatierung mit CSS.
Wären da nicht die unterschiedlichen Browserdarstellungen, vor allem im Zusammenhang mit der Eigenschaft “float”!
Fallbeispiel:
Ein Bild mit der Eigenschft “float:left”, daneben eine ungeordnete Liste.
<img src="bild.jpg" alt="" style="float:left; margin:0 10px 10px 0;" />
<ul>
<li>erstes Listenelement</li>
<li>zweites Listenelement</li>
</ul>
Das Ergebnis in den unterschiedlichen Browsern:
Warum ist das so?
Bei Listen “floatet” nicht die gesamte Liste, sondern der Listeninhalt. Ob sich die Bullets nun über oder unter dem Bild befinden macht kaum Unterschied…
Was kann man tun?
Damit die Liste als gesamte Einheit “floatet” benötigt sie einen eigenen “Block Formatting Context”. Dadurch wirkt sich das “float:left” nicht auf die Inhalte der Liste sondern auf die gesamte Liste aus.
Wie erreicht man das?
Hier kommt eine der wohl am wenigsten genutzten Eigenschaften ins Spiel: overflow.
Detailiertere Infos hierzu: http://www.w3.org/TR/CSS21/visuren.html#block-formatting
Mit einer Definition von “overflow” welche vom Default- Wert “visible” abweicht erhält das gesamte Element den besagten “Block Formatting Context” – die Liste befindet sich rechts vom Bild, alle Bullets sind zu sehen und das “margin-right” des Bildes wirkt.
<img src="bild.jpg" alt="" style="float:left; margin:0 10px 10px 0;" />
<ul style="overflow:auto;">
<li>erstes Listenelement</li>
<li>zweites Listenelement</li>
</ul>
Wäre da nicht der Microsoft Internet Explorer!
Wie nicht anders erwartet will der “Redmonder Möchtegern- Webseitendarsteller” eine Extra- Behandlung. Und da greift wieder einmal die diesbezügliche Spezial- Waffe “hasLayout” – siehe Posting hasLayout – Behebung vieler Darstellungsfehler im MSIE
In diesem Fall verwenden wir das Microsoft-proprietäre “zoom”.
Perfekt, wären da nicht – man glaubt es kaum – die Microsoft Internet Explorer unter der Version 7!
Da tut sich optisch noch nicht viel, ein “padding-left:25px” hilft aber, und wirkt sich bei den vielen anderen Browsern kaum aus!
Geschafft, und so sieht der Code unseres Beispieles dann aus:
<img src="bild.jpg" alt="" style="float:left; margin:0 10px 10px 0;" />
<ul style="overflow:auto; zoom:1; padding-left:25px;">
<li>erstes Listenelement</li>
<li>zweites Listenelement</li>
</ul>
Etwas “quick and dirty” und nicht ganz valide, mittels Conditional Comments lässt sich aber die CSS- Anweisung “zoom” auslagern, wird vom Validator also nicht analysiert und macht somit den Anschein von Validität – ein doch verschmerzbarer Kompromis!
Viele schöne optische Effekte lassen sich mit halbtransparenten PNG- Grafiken erstellen, wäre da nicht der Microsoft Internet Explorer Version 6 (IE6). Der IE6 unterstützt die Darstellung nicht und zeigt statt dessen einen grauen Hintergrund an.
Es existieren viele Workarounds und Scripte, die sich dieser Problematik annehmen. Meist fehlte es aber an der Unterstützung von Hintergrundbildern, und da vor allem bei positionierten Hintergrundbildern.
Wieder sehr einfach in der Handhabung: das JavaScript im Header einbinden (bevorzugt mit “Conditional Comments”) und in einer eigenen Liste die Elemente bzw. Klassen eintragen, welche die PNG- Dateien beinhalten.
Da das Script winzig klein ist (5,5kb bzw. 11kb) und wirklich nur auf die definierten Elemente bzw. Klassen wirkt ist der Seitenaufbau auch dementsprechend schnell.
Mit der Pseudo- Klasse “:hover” (Info auf SELFHTML) lassen sich viele Effekte kreieren: Hintergrund- oder Farbwechsel (wie hier links in der Navigation) bei Mouse-Over – gerne auch “mehrstufig” – oder sog. “CSS- Infoboxen” (Info auf SELFHTML). Und auch so manches Dropdown- Menü arbeitet mit li:hover.
Eine praktische Sache, wäre da nicht der “Microsoft Internet Explorer 6″ (IE6): dieser kann, anders als bei W3C definiert :hover nur auf Links anwenden!
Einen anderen und viel einfacheren, praktischeren Weg geht Peter Nederlof: der in Utrecht, Holland lebende Webdeveloper hat ein JavaScript namens “Whatever:hover” entwickelt, welches das gesamte CSS nach Pseudoklassen durchsucht, diese durch eine Klasse ersetzt und dem “gehoverten” Element zuweist.
Eingebunden wird dieses Script einmalig in den Body, ev. mittels “Conditional Comments” nur für den IE6:
body {behavior:url("csshover.htc");}
Dies funktioniert allerdings nur bei aktivierter JavaScript- Umsetzung im Browser, bei so wichtigen Elementen wie die Navigation sei also an eine Fallback- Lösung gedacht!
Am Beispiel handover.at ist die genannte Fallback- Lösung eine separate Sub- Navigation unterhalb des Head- Bereiches – nat. nur im IE6 mit deaktivierter JavaScript- Unterstützung.
Das beschriebene Script – inkl. detailierter Beschreibung und Einbindungsanleitung – ist zu finden unter www.xs4…csshover.html
Zitat: “Tipps und Tricks für CSS auf höchstem Niveau. Genau so könnte eine kurze und prägnante Zusammenfassung des Buches “Fortgeschrittene CSS-Techniken” lauten.”
So wird das neue Buch aus dem Galileo- Verlag angepriesen. Geschrieben von Ingo Chao und Corina Rudel bietet es, nach Studium der Leseprobe, Unterstützung und Richtungsweisung zum Thema “CSS der neueren Generation”.
Auf der “Webstandard”- Site wurde zur Bewerbung und Verbreitung dieses Werkes ein genialer “Trick” angewandt: das Buch wird unter allen verlost, welche einen Artikel in Ihrem Blog hierzu veröffentlichen – und auch wir sind somit dabei!
neuere Einträgeältere Einträge
Nach Begriffe sortiert ("Tag Cloud"):
CMS CSS facebook Fun Google+ Gratis Internet jQuery kick-image.at Musik Printdesign Sicherheit Test TinyMCE Twitter Webdesign Webtool WordPress2011
2010
2009
2008
2007
2006
