Webdevelopment Blog

IE8 CSS Hack

webmaster — Fri, 10 Jul 2009 14:01:16 +0000

Der neue IE8 von Microsoft ist raus, da es dort nicht ganz rund läuft (kein Browser ist bug free) stellt sich die Frage: Gibt es einen CSS Hack für den IE8?

Und die antwortet lautet ja! Es gibt einen CSS Hack für IE8!

Zum Glück ignoriert der IE8 doppelte Rauten (##). Siehe auch die Bug Beschreibung: Multiple Type ID selector statement is incorrectly ignored

Damit kann man Klassen definieren die jeder Browser darstellt, außer dem IE8. Wie das ganze im Bsp. aussieht könnt ihr hier sehen:
body { font-family: Verdana, Helvetica, Arial, sans-serif; background-color: white; color: #FFF; /* fuer den IE8 */ } body, #ie8#fix { color: #000; /* fuer alle anderen Browser, nur nicht iE8 */ }

Dadurch wird die Schriftfarbe im IE8 weiß (#FFF) und in allen anderen Browsern schwarz (#000) dargestellt.

Selbstverständlich kann zwischen den beiden # alles mögliche stehen. Mit diesem Konstrukt könnt ihr den IE8 aber von bestimmten CSS Anweisungen ausschließen. Und zwar ignoriert der IE8 alle folgenden Zeichen nach zwei Rauten. Damit hätten wir einen passenden IE8 CSS Hack.

Siehe auch: CSS Hacks bei webdev.bloggaworld.de

XHTML und das Box Modell

webmaster — Mon, 24 Nov 2008 12:30:36 +0000

Wer kennt es nicht, die ständige, lästige Browser Unterschiede beim entwickeln von Webseiten. Im Firefox sieht alles super aus, der IE7 stellt es mittlerweile auch gut da doch unser alter Freund der IE in die Tonne kloppen 6 hat wiedermal keine Ahnung.

In einem anderen Artikel hab ich euch über die CSS Hacks informiert. Das ist natürlich ein Weg um es wieder gerade zu biegen, vielleicht auch der coolste aber nicht der beste, der beste Weg ist valides XHTML zu verwenden und sich das Box Modell zum Nutzen zu machen. Im “Standards Compliance Mode” sieht es schon besser aus als im “Quirks Mode“.

Hier eine Grafik von SELFHTML zum Box Modell:

Damit das Box Modell auch korrekt zum Einsatz kommt brauchen wir einen gültigen Doctype.

Am besten eignet sich hier der XHTML Doctype:

Es gibt noch andere Doctypes, der XHTML 1.0 ist aber der am “einfachsten” zu nutzende.

Vor diesem Doctype darf kein PHP Code oder sonstige Zeichen sein, im IE6 verursacht das einen Bug der diesen Browser wieder in den ungewollten Quirks Mode stellt.

Mit diesem XHTML Doctype befinden wir uns im “Standards Compliance Mode” und können die vollen Züge des Box Modells genießen. Dabei ist zu bedenken, wie in der Grafik oben dargestellt, dass sämtliche Angaben wie margin, padding oder border auf die eigentliche Größe drauf gerechnet werden.

Haben wir also ein DIV mit einer Länge von 100px und geben diesem ein padding von 10px links und rechts, vergrößert sich das DIV gemäß des Boxmodells um 20px, der DIV Bereich ist dann also 120px groß.

Der richtige Doctype ist eines der wichtigsten Inhalte einer HTML Datei, das oben genannte Beispiel sollte als Grundlage genutzt werden. Dann habt ihr nicht mehr ganz so viele Probleme mit der unterschiedlichen Darstellung in den verschiedenen Browsern.

Um valide zu bleiben muss dann auch in XHTML geschrieben werden, die Syntax unterscheidet sich hier im Gegensatz zu HTML.

Schaut euch die Links an die ich in diesem Artikel eingebaut habe um mehr über die verschiedenen Begrifflichkeiten herauszufinden.

Hier noch interessante externe Links zum Thema Box Modell:

CSS BOX Modell Hack

Ausführliche Box Modell Beschreibung von jendryschik.de

CSS Hacks

webmaster — Mon, 22 Sep 2008 19:48:03 +0000

Als Webentwickler hat man es echt schwer. Man macht eine super Seite im Firefox (empfehle ich jedem der Internetseiten macht) schaut sich die Seite dann im IE an und spätestens beim IE6 knallts. So war das aber nicht gemeint! Microsoft hat es leider nicht so mit dem unterstützen von Standards. Der IE7 bringt da einiges an Besserung ins Spiel, das gelbe vom Ei ist aber auch der nicht.

Firefox 3 hier kostenlos runterladen

Also muss man sich anders behelfen. Und hier kommen die CSS Hacks ins Spiel!

(HTML+CSS wurden kursiv dargestellt)

Angenommen ihr habt ein DIV:

Hallo das ist mein DIV

dann würdet ihr in der CSS Datei hingehen und folgende Klasse definieren:

.meineKlasse{
height:200px;
width:150px;
background-color:#CCC;
padding:2px 1px;
}

Angenommen der IE würde die höhe nicht korrekt darstellen, keine Sorge, ihr braucht euren PC nicht aus dem Fenster schmeißen!

Hier kommen jetzt die Hacks um Klassen im IE6 und IE7 anders darzustellen, es müssen auch nur die Eigenschaften geändert werden die es nötig haben, der Rest wird vererbt.

IE6 HACK:
* html .meineKlasse{
height:202px;
}

IE7 HACK:
*+html .meineKlasse{
height:203px;
}

Das * html wird nur vom IE6 interpretiert, andere Browser ignorieren dies. Genau wie das *+html für den IE7.

Und schon habt ihr für drei Browser individuelle Klassen erstellt! Das ganze ist natürlich valide. Man könnte hier noch weiter ausholen…
Aber für die roots des CSS hacken sollte das reichen

Sollte demnächst mal etwas browserübergreifend nicht so aussehen wie ihr es gerne hättet, hackt das CSS!

Nützliche Firefox Extensions für Webentwickler

webmaster — Fri, 19 Sep 2008 23:43:12 +0000

Als ersten Artikel biete ich euch hier erstmal die roots zum webentwickeln an. Zum einen sollte jeder Entwickler Firefox nutzen. Zum anderen empfehle ich folgende Extensions (s.u.).

Mozilla bietet folgende Seite an um Extensions herrunter zu laden:
https://addons.mozilla.org/de/firefox/

Und genau diese Extensions sind für mich einer der Gründe warum der Firefox im Gegensatz zu anderen Browser die so im WWW rumschwirren “the hottest” ist

Nun gut, zum anderen verarbeitet der FF validen Code zum größten Teil auch korrekt. Vom InternetExplorer V6 konnte man das nicht behaupten, die Version 7 brachte zwar Hoffnung aber auch hier ist noch lange nicht aller Tage Abend.

Das ist aber ein anderes Thema, jetzt zu den versprochenen Extensions.

Hier mal eine Auflistung der besten für Webentwickler und Designer:

- Web developer
Wohl die beste und umfangreichste Extension für Webentwickler. Eine Statusbar mit verschiedenen Option wie z.B. on the fly HTML Anpassung, CSS, Cookies, Resize, Authentifizierungen zurück setzen,… Super Tool!
https://addons.mozilla.org/de/firefox/addon/60

- ColorZilla 2.0
Super Farbpicker um verschiedene Farbtöne aus den Seiten rauszuziehen. Mit integriertem Zoom feature,…
https://addons.mozilla.org/de/firefox/addon/539

- UrlParams
Zeigt euch GET und POST Variablen der aktuellen Seite an. Damit kann man sehen welche Variablen übertrage werden, on the fly Werte ändern. Sehr gutes Tool.
https://addons.mozilla.org/de/firefox/addon/1290

- JSView
Eine Extension die euch schnellen Zugriff auf alle eingebundenen Javascripte und CSS Dateien erlaubt. In den Optionen muss noch die Darstellung in der Statusbar aktiviert werden. Super praktisch!
https://addons.mozilla.org/de/firefox/addon/2076

Das sind erstmal die grundlegenden Extensions die jeder Webentwickler braucht. Es gibt noch Sachen wie den Firebug, der mir selber aufgrund seiner buglastigkeit aber nicht wirklich gefällt.

Mit den oberen seid ihr schon mal gut ausgerüstet!

Ansonsten schaut einfach mal nach den anderen Webentwickler Extensions:
https://addons.mozilla.org/de/firefox/browse/type:1/cat:4

Wer sich selber mal mit XUL und der Entwicklung von FF Extensions beschäftigen möchte schaut am besten mal hier vorbei:
http://www.mozdev.org/

Das sind so die roots die ich nutze um vernünftig entwickeln zu können, es gibt noch jede Menge andere, einige davon sind eher Geschmackssache andere haben so ihre Bugz und wieder andere kenne ich gar nicht

Diese könnt ihr natürlich gerne im Kommentar posten, ich ergänze die Liste dann nach eigenem Test der Extension.

So ich hoffe ihr kanntet die ein oder andere Erweiterung noch nicht, viel Spaß damit

Hallo Bloggaworld!

admin — Fri, 19 Sep 2008 16:45:48 +0000

Willkommen zum Webdevelopment Blog! Dieser Blog ist seit Freitag, den 19. September 2008 19Uhr online. Hier werdet ihr zukünftig über News rund ums Thema Webdevelopment informiert. Alle Websprachen werden besprochen, Tutorials verfasst und sinnvolle Links zur Verfügung gestellt.

Bloggaworld informiert dich damit um noch ein weiteres Thema: Webdevelopment.

Da bleibt mir nur noch eins zu schreiben: Blog the world on bloggaworld!

Infos rund um Bloggaworld findet ihr natürlich im blog.bloggaworld.de