IE9: CSS3 "border-radius" und "linear-gradient" Problematik - Lösung gesucht

Antworten
#1
21.10.2012 08:47
avatar  Bommel
#1 IE9: CSS3 "border-radius" und "linear-gradient" Problematik - Lösung gesucht
avatar
Bommel
Mitglied

Hallo allerseits,

ich möchte gern die o.g. Problematik möglichst ohne Eingriff in das Template lösen. Es soll mit den vorhandenen Möglichkeiten im Admin-Menü vorgenommen werden - also CSS-Addon, Kopf & Fusszeile sowie Kopfbereich-Addon.

Derzeit verwende ich folgende CSS3-Script-Variante um die grafische Gestaltung an die verschiedenen Browserversionen anzupassen. Leider wird damit die IE9-Problematik nicht gelöst. Hat hier jemand bitte eine Idee bzw. Ansätze, wie das gelöst werden kann?

1
2
3
4
5
6
7
8
9
10
11
12
 
.box .boxheader, .dheader, .box {
background: #a7cfdf; /* Old browsers */
background: -moz-linear-gradient(top,  #a7cfdf 0%, #23538a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a7cfdf), color-stop(100%,#23538a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #a7cfdf 0%,#23538a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #a7cfdf 0%,#23538a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #a7cfdf 0%,#23538a 100%); /* IE10+ */
background: linear-gradient(to bottom,  #a7cfdf 0%,#23538a 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=0 ); /* IE6-9 */
-webkit-border-radius: 6px 6px 0px 0px;
border-radius: 6px 6px 0px 0px;
}
 



LG Bommel

Ich und XOBOR... wir sind nicht einfach nur Vertragspartner - wir sind ein Team!
(Der wohl wichtigste Grund meiner Beiträge hier.)

Boardnummer: 585867 | Template: Business (unverändert) | Tarif: Basis
Betriebssystem: Windows 7 | Auflösung: 1440x900, 1024x600 (Netbook)
Browser: Mozilla FireFox (17.0.1), Internet Explorer (9.0.11), Google Chrome (23.0.1271.95 m), Safari (5.1.7), Opera (12.10.1652)

 Antworten

 Beitrag melden
#2
22.10.2012 10:25
avatar  Ingmar
#2 RE: IE9: CSS3 "border-radius" und "linear-gradient" Problematik - Lösung gesucht
avatar
Ingmar
Technik

Schau mal hier:

http://www.colorzilla.com/gradient-editor/

Da gibt es auch die Möglichkeit, den "IE9-Support" zu aktivieren - dort wird dann auch erklärt was getan werden muss um dem IE9 echte Farbverläufe beizubringen.

Der border-radius sollte im IE9 aber eigentlich funktionieren.

Viele Grüße,
Ingmar
 Technik · Homepagemodules.de · Miranus GmbH

 Antworten

 Beitrag melden
#3
22.10.2012 10:38
avatar  Bommel
#3 RE: IE9: CSS3 "border-radius" und "linear-gradient" Problematik - Lösung gesucht
avatar
Bommel
Mitglied

Zitat von Ingmar im Beitrag #2
Der border-radius sollte im IE9 aber eigentlich funktionieren.

Nein... das macht er eben nicht. Ich habe mir meine Änderungen im IE9 von mehreren Standorten angeschaut. Überall das gleiche Ergebnis.

Mit dem von dir vorgeschlagenen Tool habe ich nun, seitdem mir am Freitag bei unserer gemeinsamen Fehlersuche in einer anderen Angelegenheit die fehlerhafte Umsetzung aufgefallen ist, alle Änderungen am WE nachbearbeitet. Bis auf dem IE9 werden nun alle Änderungen korrekt angezeigt.

Auch die Lösung mit dem IE9-Support habe ich versucht einzubauen. Es geht einfach nicht. Wo wird dieses Script eingesetzt?

1
2
3
4
5
6
7
 
<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;
    }
  </style>
<![endif]-->
 



LG Bommel

Ich und XOBOR... wir sind nicht einfach nur Vertragspartner - wir sind ein Team!
(Der wohl wichtigste Grund meiner Beiträge hier.)

Boardnummer: 585867 | Template: Business (unverändert) | Tarif: Basis
Betriebssystem: Windows 7 | Auflösung: 1440x900, 1024x600 (Netbook)
Browser: Mozilla FireFox (17.0.1), Internet Explorer (9.0.11), Google Chrome (23.0.1271.95 m), Safari (5.1.7), Opera (12.10.1652)

 Antworten

 Beitrag melden
#4
22.10.2012 11:00
avatar  Ingmar
#4 RE: IE9: CSS3 "border-radius" und "linear-gradient" Problematik - Lösung gesucht
avatar
Ingmar
Technik

Möglichst weit "oben" im Quellcode (z.B. als Head-Addon)

Viele Grüße,
Ingmar
 Technik · Homepagemodules.de · Miranus GmbH

 Antworten

 Beitrag melden
#5
22.10.2012 11:17
avatar  Bommel
#5 RE: IE9: CSS3 "border-radius" und "linear-gradient" Problematik - Lösung gesucht
avatar
Bommel
Mitglied

Das habe ich nun gemacht. Und ich habe das Script vom ersten Beitrag angepasst.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
.box .boxheader, .dheader, .box {
background: #a7cfdf; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2E3Y2ZkZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyMzUzOGEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #a7cfdf 0%, #23538a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a7cfdf), color-stop(100%,#23538a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #a7cfdf 0%,#23538a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #a7cfdf 0%,#23538a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #a7cfdf 0%,#23538a 100%); /* IE10+ */
background: linear-gradient(to bottom,  #a7cfdf 0%,#23538a 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7cfdf', endColorstr='#23538a',GradientType=0 ); /* IE6-8 */
-webkit-border-radius: 6px 6px 0px 0px;
border-radius: 6px 6px 0px 0px;
}
 



Bei mir ändert sich hier nichts in der Anzeige des IE9 (mehrfach aktualisiert).

Ich und XOBOR... wir sind nicht einfach nur Vertragspartner - wir sind ein Team!
(Der wohl wichtigste Grund meiner Beiträge hier.)

Boardnummer: 585867 | Template: Business (unverändert) | Tarif: Basis
Betriebssystem: Windows 7 | Auflösung: 1440x900, 1024x600 (Netbook)
Browser: Mozilla FireFox (17.0.1), Internet Explorer (9.0.11), Google Chrome (23.0.1271.95 m), Safari (5.1.7), Opera (12.10.1652)

 Antworten

 Beitrag melden
#6
22.10.2012 16:46
avatar  Christian
#6 RE: IE9: CSS3 "border-radius" und "linear-gradient" Problematik - Lösung gesucht
avatar
Christian
Techniker

Der IE kann leider keine Kombination aus Farbverlauf und abgerundeten Ecken.
Es gibt ein paar Notlösungen ...

Nachlesen kann man eine z.B. hier (nebenbei angemerkt, eine sehr hilfreiche Seite bei Problemen solcher Art)
http://stackoverflow.com/questions/46926...adient-bleeding


 Antworten

 Beitrag melden
#7
22.10.2012 20:38
avatar  Bommel
#7 RE: IE9: CSS3 "border-radius" und "linear-gradient" Problematik - Lösung gesucht
avatar
Bommel
Mitglied

Zitat von Christian im Beitrag #6
Der IE kann leider keine Kombination aus Farbverlauf und abgerundeten Ecken.

Das glaube ich gern... doch trotzdem stehe ich jetzt hierbei vor einem Rätsel. Zuerst einmal ein Screenshot - gemacht mit dem IE9.



Auf diesem Bild ist sehr gut zu erkennen, dass der IE9 auf ein und derselben Seite mal mit dieser Kombination umzugehen weiß und mal nicht. Irritierend dabei ist, dass der IE9 das Script aus Beitrag 5 im Box-Header- und Box-Contentbereich ignoriert, obwohl es ja eigentlich zur Behebung des Problems gedacht ist. Nun betrachte dir aber bitte mal den Artikel-Headerbereich. Dort kommt das Script aus dem Beitrag 1 zum Einsatz. als das welches nicht für die Eliminierung der IE9-Problematik vorgesehen ist. Und dann schau mal bitte in die Sidebar. Sollte das Ergebnis dort nicht eigentlich auch im Artikel-Headerbereich erscheinen!? Wie gesagt alles auf einer Seite. Ich habe diesbezüglich die CSS-Addons seit Beitrag 5 nicht mehr geändert. Denn ich war extra deswegen noch los um an einem anderen Rechner das Verhalten nachzuvollziehen. Dort werden mir mit dem IE9 alle Ecken nicht abgerundet angezeigt und der Farbverlauf fehlt. Es wird immer merkwürdiger.

Ich werde die Scripts zu meinem Forumblog und zum Boxheader- und Boxcontentbereich nicht mehr ändern, damit ihr das auch selbst nachvollziehen könnt. Mir ist es leid, hier immer wieder blöd da zustehen. Ich weiß, dass ich kein Profi in Webprogrammierung bin. Doch ich bin diesbezüglich auch kein Laie.

LG Bommel

PS: Und damit hier nicht gleich wieder falsche Interpretationen von anderen Seiten aufkommen - der letzte Absatz war und ist kein Vorwurf an die Mitarbeiter von Miranus. Ach... und Christian, Danke für den Link, doch der hilft mir nur bedingt, denn Englisch ist nicht meine Sprache.

Ich und XOBOR... wir sind nicht einfach nur Vertragspartner - wir sind ein Team!
(Der wohl wichtigste Grund meiner Beiträge hier.)

Boardnummer: 585867 | Template: Business (unverändert) | Tarif: Basis
Betriebssystem: Windows 7 | Auflösung: 1440x900, 1024x600 (Netbook)
Browser: Mozilla FireFox (17.0.1), Internet Explorer (9.0.11), Google Chrome (23.0.1271.95 m), Safari (5.1.7), Opera (12.10.1652)

 Antworten

 Beitrag melden
Antworten
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!