CSS3 für IE 6 - 8
Schatten erzeugen für ältere Internet Explorer
Ich erkläre es hier ein mal, an dem Beispiel einer Browser- Weiche
<!--[if IE 8]><link rel="stylesheet" type="text/css"
media="screen" href="/css/ie7.css" />
In der CSS (Stylesheet) wird als Beispiel eingetragen:
p {
font-weight: bold; zoom: 1;
filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=2, OffY=2, Color=#121212);
}
h1 {
font-weight: bold; zoom: 1;
filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=3, OffY=3, Color=#121212);
}
h2{ font-weight: bold; zoom: 1;
für einen kompletten Container:
filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=2, OffY=2, Color=#121212);
}
#div{ font-weight: bold; zoom: 1;
filter: progid:DXImageTransform.Microsoft.DropShadow(OffX=2, OffY=2, Color=#121212);
}
OffX und OffY stehen für die Verschiebung. In der CSS3 würde die obere Zeile so aussehen:
#div{ box-shadow: 3px 3px 0px #121212;
}
Ändern der Deckkraft in älteren IE:
In CSS3 : opacity: 0.5;
Im IE 8 muss es so ausgezeichnet werden:-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)"
Im IE 6-7 muss es so ausgezeichnet werden:
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50)
Textfarbe transparent gestalten
IE 8
Achtung die Anweisungen müssen beim IE 8 auf einer Zeile stehen.
-ms-filter: "progid:DXImageTransform.Microsoft.Chroma(color='white')
progid:DXImageTransform.Microsoft.Alpha(opacity=50)";
IE 6-7
filter: progid:DXImageTransform.Microsoft.Chroma(color='white')
progid:DXImageTransform.Microsoft.Alpha(opacity=50)
Runde Ecken im Internetexplorer 7-8
Dafür muss man sich das Script css3pie einbinden.
Runterzuladen auf css3spie.com
Eingebunden muss es bei Joomla in jedem Fall im Head-Bereich.
Ansonsten kann man es auch im Stylesheet einbinden.
Die Dateien hochladen und die betroffenen Container (Div) einbinden.
Beispiel:
<!--[if lte IE 8]>
Im Stylesheet:
<style>
#maincontent{behavior:url(/PIE.htc);}
</style>
<![endif]-->
#maincontent{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#maincontent{
behavior: url(/PIE.htc);}