Wer nicht nur jpg's und gif's in seine Homepage einbinden will, sondern auch auf png's mit Transparenzen zurückgreifen möchte, steht vor der Miserie, dass zwar aktuelle Browser wie Safari, Firefox und der Internet Explorer 7 die Bilder unterstützen, der etwas ältere IE 6 jedoch – standardmäßig – nicht. Das Problem sollte nicht unterschätzt werden, denn laut einer Browser Statistik von Prima Web Tools nutzen immer noch 31.4% den Internet Explorer 6.0 (Stand Januar 2008). Wie kann man sich also Abhilfe schaffen?

Während meiner Recherche im Web nach einer Lösung bin ich auf eine einige Workarounds gestoßen, von denen entäuschender Weise viele nicht funktioniert haben oder png's nur als Image, nicht aber als background-image unterstützten. Abhilfe schaffte da erst der IE PNG Fix v1.0 RC4 von Angus Turnbull. Die Anwendung des png-Fix ist so einfach wie effektiv:

Als erstes lädt man sich die 15kb kleine Zip-Datei herunter. In dem Archiv sind 6 Dateien enthalten, von Relevanz ist jedoch nur die iepngfix.htc. Diese kopiert man sich in sein Projekt-Verzeichnis. Alles, was man jetzt noch tun muss ist per CSS auf die .htc zu absolut zu verweisen, beispielsweise über einzelne ID's oder Klassen. Ich bevorzuge den Universalselektor "*":

* {
_behavior: url(http://www.beispiel.de/iepngfix.htc);
}

Der Hack _behavior bewirkt, dass nur der Internet Explorer 6.0 die Eigenschaft "behavior: url();" interpretiert, alle anderen Browser werden die Eigenschaft ignorieren.

Was jetzt noch fehlt ist die blank.gif, die aus der Zip-Datei in den images-Ordner kopiert werden muss.

Wer mit dem Workaround arbeiten will, muss jedoch kleine Einschränkungen in Kauf nehmen, die aber meiner Meinung nach nicht tragisch und teilweise auch umgehbar sind. Angus Turnbull schreibt dazu folgendes:

• Can't help IE versions prior to 5.5.
• Users can't right-click-save processed PNG images, they'll save the blank GIF file if they try that.
• The script detects the ".png" extension in image URLs. So if you have a CGI script that generates a PNG image, you may have to rewrite parts of the script, or just cache them as PNG files somewhere.
• It's most reliable on elements with non-'auto' dimensions set. So, give images and other elements width/height values; '100%', '10em' and '200px' and so on are all OK.
• Background PNG images can't be tiled. This is a limitation of the IE filter.
• Similarly, padding and borders don't indent the PNG image. An easy fix for this is wrapping your PNG images in container DIVs or similar.
• There may be about a short time as soon as the image loads when images are not transparent, before the IE filter kicks in.

Trotz dieser "Known Issues" ist der IE PNG Fix von Angus Turnbull meiner Meinung nach die beste Lösung, um beim IE 6.0 in den Genuss von png-Bildern zu kommen.

Für die Erstellung einer neuen Webseite sollte man direkt zu Anfang gewisse CSS-Einstellungen vornehmen, um von vornherein Problemen bzw. möglichen Problemen aus dem Weg zu gehen.
Meine Empfehlung sieht folgendermaßen aus:

body, div, dl, dt, dd, ul, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td, html, span, a, table, form, image, li {
margin: 0;
padding: 0;
vertical-align: top;
border: none;
outline: none;
}

Mit diesem Code werden die Selektoren normalisiert, d.h. alle Divs, Überschriften, Images usw. werden oben links ausgerichtet und haben keinen Border. Man könnte den selben Effekt mit einem Sternchen erreichen:

* {
margin: 0;
padding:0;
vertical-align: top;
border: none;
outline: none;
}

Ein Sternchen spricht alle Selektoren eines Projektes an und gibt ihnen die angegebene Deklaration. Ich empfehle jedoch die erste Schreibweise, da sie deutlich flexibler ist.

Hier ist eine kleine Übersicht, wie man richtig auskommentiert:

CSS
/* Kommentare Ein- oder Mehrzeilig */

HTML, XML
<!-- Kommentare Ein- oder Mehrzeilig -->

PHP, Javascript, ActionScript
// Einzeiliger Kommentar
/* Mehrzeiliger Kommentar */

Mit CSS gibt es vier Möglichkeiten, Text- oder Hintergrundfarben eines Projektes zu bestimmen. Als Beispiel sollen die folgenden Klassen dienen:

1. Möglichkeit: Angabe eines Hexadezimal-Wertes #rrggbb

.roter_text { 
color: #ff0000; 
}

bzw. falls möglich als optimierte Fassung (#rgb)

.roter_text { 
color: #f00; 
}

2. Möglichkeit: Farbwert-Angabe über den integer range rgb(rrr,ggg,bbb)

.gruener_hintergrund { 
background-color: rgb(0,255,0) 
}

3. Möglichkeit: Prozentuale Angabe durch float range rgb(rrr%,ggg%,bbb%)

.blauer_hintergrund { 
background-color: rgb(0%, 0%, 100%) 
}

4. Möglichkeit: Angabe eines Farbnames der VGA-Farbpalette

.gelber_hintergrund { 
background-color: yellow 
}

Der Internet Explorer verdoppelt angegebene margin-Werte, wenn der Style ein zusätzliches float besitzt. Ein Beispiel:

.content { 
margin-left: 80px; 
}

Dieser Fehler wird als "double margin float bug" bezeichnet. Im Firefox wird das korrekte margin von 80 Pixeln angezeigt, der IE verdoppelt diesen Wert auf 160 Pixel. Man kann diese fehlerhafte Verdopplung jedoch umgehen, indem man dem Style ein display:inline hinzufügt:

.content { 
margin-left: 80px; 
display: inline; 
}

Der FF zeigt durch diese Angabe keine Veränderung.

Normalerweise wird Text, der beispielsweise im FF oder IE mit der Maus markiert wird, blau hinterlegt und die Schriftfarbe auf Schwarz geändert. Es gibt aber die Möglichkeit, im FF diese Standard-Einstellung zu ändern, indem man bespielsweise folgendes in seinem Style Sheet angibt:

::-moz-selection

{ 
background-color: #f00; 
color: #0f0; 
}

Jetzt ist markierter Text rot hinterlegt und die Schrift hat die Farbe Grün.



Das ganze funktioniert jedoch nicht im IE sondern ist nur ein Hack für Firefox.

Stört Euch auf Eurer Website die hässliche Punkt-Umrandung, die erscheint, wenn man einen Link — sei es Bild oder Text — gedrückt hält oder anklickt? Ihr braucht nur im HTML-Quellcode oder in der CSS-Datei folgenden Style angeben, um die Umrandung zu entfernen:

a:focus { 
outline: none; 
}