ich überarbeite gerade meine Internetseite http://www.spielmannszug-badlangensalza ... index.html und wollte Browser abhängige Style erstellen
mein versuch das über (siehe Code) zu realisieren ist bis jetzt gescheitert weil ich für Safarie, Opera, Firefox dieses nicht hinbekomme und weil ich nicht den richtigen Code im Netz finden konnte.
- Code: Alles auswählen
<!--[if IE]>
<style type="text/css">@import url(css/ie.css);</style>
<![endif]-->
Beispiele:
- Code: Alles auswählen
/*Opera browser hack muss unbedingt vor Safari */
@media all { div.c-2{margin-top:5px; padding-top:0px;} }
/*Opera browser hack muss unbedingt vor Safari */
/* Safari all browser hack muss unbedingt nach Opera */
@media screen and (-webkit-min-device-pixel-ratio:0){
div.c-2{margin-top:-7px; padding-top:0px;} }
/* Safari all browser hack muss unbedingt nach Opera */
/* FireFox 3 */
div .c-2, x:-moz-any-link, x:default{
margin-top:-7px; padding-top:0px;
}
iframe, x:-moz-any-link, x:default{
border-style:none;
} /* FireFox 2 */
div .c-2, x:-moz-any-link{
margin-top:-7px; padding-top:0px;
}
iframe, x:-moz-any-link{
border-style:none;
}
/* Only FireFox 3 */
html>/**/body div .c-2, x:-moz-any-link, x:default{
margin-top:-7px; padding-top:0px;
}
html>/**/body iframe, x:-moz-any-link, x:default {
border-style:none;
}
Schöner wäre es aber die Styles in separate Dateien zu packen.
Nachtrag: folgender Code Positioniert GoogleChrome, Safarie, Opera, Firefox exakt auf die gleich Position.
was ich dabei nicht verstehe ist wenn ich danach margin-top:0px; schreibe wird dieses durch die Browser ignoriert
Beispiel:
- Code: Alles auswählen
/* Google Chrome, Safarie, Opera, Firefox browser hack */
body:nth-of-type(1) .c-2{margin-top:50px;}
Nachtrag: Opera positioniert auf ca. -10px
MfG gabischatz

