ich dachte immer, dass PNG-Transperenzen im ie nicht funzen. bei denen geht's aber:
http://www.100besteschriften.de
kann mir vielleicht jemand sagen, wie die das gemacht haben?
Da steht's doch:
pngbehavior.htc
hier noch eine lösung
http://koivi.com/ie-png-transparency/
über einen ie internen filter geht es!
du lädst eine eigene css datei für den ie:
z.B. so:
<!--[if lt IE 7]>
<style type="text/css">
@import'css/_ie/ie6.css';
</style>
<![endif]-->
in der css datei kannst du css hintergrundbilder für den ie neu definieren:
#ie_png {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/image.png', sizingMethod='image');
}
für die "sizingMethod" gibt es die eigenschaften:
crop: clips the image to fit the dimensions of the object.
image: default. Enlarges or reduces the border of the object to fit the dimensions of the image.
scale: stretches or shrinks the image to fill the borders of the object.
außerdem brauchst du noch eine datei namens pngbehavior.htc (google), die bindest du so ein:
img {
behavior: url("css/_ie/pngbehavior.htc");
}
die kümmert sich dann um alle nicht per css eingebundenen bilder.
es gibt aber noch ein weiteres problem wenn png mit jpeg gemischt wird, falsche farbwerte in den png dateien.
hab mal eine testseite dafür gemacht:
http://sandbox.quadrifolia.de/png_test/
im safari ist alles ok, andere browser zeigen falsche farben. das problem läst sich beheben indem man die png datei noch einmal durch eines der auf der seite zuletzt genannten tools filtern läst (werden dadurch auch kleiner)...
hoffe das hilft etwas ;)
zuletzt genannte tools? gehört dazu auch der png-crusher(mac)?
ne, leider nicht :(
wie man auf den bildern ja sieht werden nur die pngs korrekt angezeigt die mit "pngcrush gamma 0.2" oder "PngGauntlet 1.1.2005.1178" unter windows behandelt worden sind...
für mac hab ich leider noch nichts gefunden.
Danke für die Tipps!
Aber irgendwo liegt der Fehlerteufel im Detail - ich habe es nicht hinbekommen.
Werde dann später ochmal in Ruhe weitertesten, aber jetzt nehme ich ein GIF.
Mercí
http://labuschin.com/journal/css/transparenz-und-anzeige-von-png-im-internet-explorer
Sebastian Brink, du hast in deinem Beispiel folgenden Code benutzt:
<!--[if lt IE 7]>
<style type="text/css">
@import'css/_ie/ie6.css';
</style>
<![endif]-->
gibt es einen Unterschied zu:
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="css/_ie/ie6.css" />
<![endif]-->
also macht das @import irgendetwas "besser" oder ist das "sauberer" @import zu verwenden? Gibt es einen Nachteil bei <link>? Oder ist das im Prinzip das Gleiche?
@import ist CSS-Syntax <link... ist HTML-Syntax
du kannst hinter @import auch noch den media typ angeben, allerdings unterstützt der IE das nicht (im 7 noch nicht getestet):
@import "css/_ie/ie6.css" screen;
warum mache ich es so? eigentlich nur weil ich mein css zeugs auf mehrere datei verteile (imo übersichtlicher), ich habe also z.B. eine datei loader.css die dann so aussieht:
/**********************************
Use: main screen import
Author: Sebastian Brink
***********************************/
@import "_library/reset.css";
@import "_library/core.css";
@import "main.css";
@import "_library/lightbox.css";
/* IE5 Macintosh \*//*/
@import "_ie/mac_5.css";
/**/
hier steht noch was dazu:
http://de.selfhtml.org/css/layouts/browserweichen.htm
http://www.thestyleworks.de/ref/at_import.shtml
hab für das png problem noch ein wenig weiter gesucht und nen tool für mac gefunden um es zu beheben:
PNGOUT:
http://sandbox.quadrifolia.de/png_test/ (weiter unten auf der seite)
noch nen tool, jetzt auch in eifach - also drag&drop anstatt terminal wie beim letzten:
GammaSlamma 1.0
http://www.shealanforshaw.com/introducing-gammaslamma-10-for-osx/
Ergebnis hier:
http://sandbox.quadrifolia.de/png_test/
Seitentitel: PNG-Transparenzen und ie