Farbverlauf: Fallback für ältere Versionen des Internet Explorer möglich?

Phyler

Hallo,
ich habe gerade meine erste Wordpress-Seite erstellt und bin soweit eigentlich recht zufieden. Heute hat dann aber ein Kollege die Seite an seinem PC mit einer veralteten Version des Internet Explorers angesehen und das Navigationsmenü war nicht zu sehen bzw. nur die Hover- und Dropdown-Menüs waren sichtbar. Ich vermute als CSS-Anfänger mal, dass sein IE den Farbverlauf im Navigationsmenü unter #accesss nicht darstellen kann. Gibt es die Möglichkeit ein Fallback zu erstellen, sodass bei ihm das Menü einfach ohne Farbverlauf in der Farbe #156b3e erscheint? Falls ja, was muss ich dafür der style.css des TwentyTen hinzufügen?

Hier mal die entsprechende Passage der style.css

Code

#access {
    background-image: -webkit-linear-gradient(#156b3e 0%, #0d3f25 100%);  
    background-image: -moz-linear-gradient(#156b3e 0%, #0d3f25 100%); 
    background-image: -o-linear-gradient(#156b3e 0%, #0d3f25 100%); 
    background-image: linear-gradient(#156b3e 0%, #0d3f25 100%);">
    display: block;
    float: left;
    margin: 0 auto;
    width: 940px;
    border-bottom:10px solid #e4e241;

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Melewo

Wie schaut es damit beim IE im Kompatibilitätsmodus aus, lässt es sich so überprüfen?
Was ich so auf die Schnelle fand für ältere IEs:

Code

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#156b3e',endColorstr='#0d3f25');

Beispiel ist von dieser Seite: http://www.mediaevent.de/css/gradient.html

Wechsle im IE mal in den Kompatibilitätsmodus, da scheint noch mehr im Argen zu liegen. Einen Verlauf sehe ich aber so oder so nicht.

Phyler

Ich kann es leider erst morgen überprüfen, da ich keinen IE installiert habe. Müsste ich dann also den Code folgendermaßen anpassen?

Code

#access {
    background-image: -webkit-linear-gradient(#156b3e 0%, #0d3f25 100%);  /* Farbverlauf Menü */
    background-image: -moz-linear-gradient(#156b3e 0%, #0d3f25 100%); 
    background-image: -o-linear-gradient(#156b3e 0%, #0d3f25 100%); 
    background-image: linear-gradient(#156b3e 0%, #0d3f25 100%);">
    background-image: filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#156b3e',endColorstr='#0d3f25'); 
    display: block;
    float: left;
    margin: 0 auto;
    width: 940px;
    border-bottom:10px solid #e4e241;

Alles anzeigen

Melewo

Oder eher so?

Code

<!--[if lt IE 9]>
<link rel='stylesheet' Link zur CSS-Version type='text/css' media='all' />
<![endif]-->

Hier scheint es gut erklärt zu sein, habe es mir nur noch nicht richtig durchgelesen:

http://de.wikipedia.org/wiki/Conditional_Comments

Also eine zweite ie-style.css anlegen, denke ich mir. Hatte mal gesehen, dass auch in der CSS-Datei Browserweichen eingebaut waren. Probieren könntest Du aber unterschiedliche Varianten, mit einer sollte es dann wenigsten gelingen.

Phyler

Danke, Melewo! In welche Datei müsste der zuletzt genannte Code denn? Ist ja schließlich HTML. Ich werde mir den verlinkten Wiki-Artikel morgen mal in Ruhe durchlesen und das ganze ausprobieren.

Falls noch jemand Rat weiß oder einen konkreten Code für mich hat, bin ich aber natürlich jederzeit für Vorschläge dankbar!

Melewo

Du legst eine zweite style.css für ältere IE-Versionen an und dann würde es in den Head der Seite kommen.

Weitere Beispiele: http://www.mediaevent.de/css/conditional-comments.html

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Farbverlauf: Fallback für ältere Versionen des Internet Explorer möglich?

Jetzt mitmachen!