CSS3 rounded borders, text-shadow and gradient
Eingetragen von oslt2 (34)am 25.07.2011 - 14:31 Uhr in
Hallo liebe Themer,
habe mir mit dem Marinelli-Theme eine gewerbliche Homepage gebastelt. Das Theme benutzt auch CSS3. Allerdings sieht das alles im IE 8 halb so gut aus wie in Firefox oder in Chrome. Das liegt daran, dass der IE beim css3 versagt.
Habe nun verschiedene Workarounds ausprobiert, von denen aber keine fruchtet.
1. Boxshadow: Für den Seitentitel möchte ich einen Schatteneffekt benutzen.
Hierzu habe ich in die css3-graphics.css geschrieben:
.boxshadow #site-title,
.boxshadow #site-slogan{
text-shadow: rgba(10, 10, 10, 0.4) 2px 3px 3px;
behavior: url(ie-css3.htc);
/* This lets IE know to call the script on all elements which get the 'box' class */
}Die ie-css3.htc habe ich in die Documet-root kopiert.
Diese Datei habe ich nebst einer Anleitung auf dieser Seite erhalten: http://fetchak.com/ie-css3/
2. Background Gradient
Für die rundlichen Registerkarten des Hauptmenüs benutze ich folgenden Code, um einen Farbübergang herzustellen.
.cssgradients ul.primary li a{
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #ffd3d3),color-stop(0.5, #ff5555));
background: -moz-linear-gradient(top center,#ffd3d3,#ff5555 50%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd3d3', endColorstr='#ff5555'); /* For Internet Explorer 6,7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffd3d3', endColorstr='#ff5555')"; /* For Internet Explorer 8 */
}Mit den runden Ecken habe ich mich noch nicht befasst.
Für mich sieht das alles richtig aus, aber der IE8 auf meinem Schleppi unter XP weigert sich nach wie vor, CSS3 anzuerkennen.
Was müsste ich denn noch tun?
Vielen Dank!
Bernd
P.S. Wer das mal sehen möchte, ist eine Au-Pair Agentur: http://www.aupair-international.de
- Anmelden oder Registrieren um Kommentare zu schreiben
entweder liegt es am pfad
am 25.07.2011 - 17:39 Uhr
entweder liegt es am pfad (mal den absoluten mit http nehmen) oder du mußt die htc endung noch "anmelden" in der htaccess: AddType text/x-component .htc
Pfad zur css3 htc Datei
am 27.07.2011 - 16:07 Uhr
Hallo Caw,
tatsächlich gab es mit einer Testdatei Probleme mit dem Pfad. Ich habe folgende Dateien in einen Testordner auf den Server geladen:
http://www.aupair-international.de/test/border-radius.html
http://www.aupair-international.de/test/border-radius2.html
Die erste Datei enthält im Style jeweils folgende Adresse behavior(ie-css3.htc), die letztere behavior(/ie-css3.htc). Mit dem Slash am Anfang funktioniert es, auch mit dem ie8.
Nun könnte man sagen, schön damit wäre mein Problem gelöst, doch leider gefehlt. Die Drupal-Installation ignoriert auch den führenden Slash und den relativen Pfad. Das Gleiche gilt auch für eine URL mit http:// Es geht also weder noch.
Ich habe mir schon überlegt wie man den Theme.Cache löscht, ich lösche immer den gesamten Cache unter Konfiguration und Leistung. Ich habe das Gefühl, dass das auch ohne diese Löschung geht, weil sich das Aussehen immer gleich ändert, wenn ich eine css-Datei verändere.
Übrigens zeigt der IE 8 auch kein Favicon an.
Das mit der htaccess habe ich auch probiert, aber wieder rückgängig gemacht, nachdem kine Erfolg sichtbar wurde.
Danke, Bernd
Ne ich meinte einfach die
am 27.07.2011 - 16:13 Uhr
Ne ich meinte einfach die direkte URL zur htc-Datei also http://www.aupair-international.de ...
Pfad
am 28.07.2011 - 05:30 Uhr
Danke für deine Antwort.
Meinst du http://www.aupair-international.de/ie-css3.htc?
Das habe ich schon gemacht, ohne Erfolg.
Bernd
Die Seite funktioniert doch:
am 28.07.2011 - 06:14 Uhr
Die Seite funktioniert doch: http://www.aupair-international.de/test/border-radius2.html
Wo ist denn da das Problem?
Das ist eine Testdatei
am 28.07.2011 - 10:18 Uhr
Das ist eine Testdatei, die zwar im Pfad der Drupal-Installation liegt aber nichts mit der Drupal-Installation und dem Theme selbst zu tun hat. Ich wollte damit nur zeigen, dass die Weise wie ich die .htc Dateien eingebunden habe, eigentlich funktionieren müsste. Nur Drupal macht mir einen Strich durch die Rechnung, wenn ich diese Dateien in die Stylesheets aufrufe, die ich über Drupal eingebunden habe. Es gibt da extra eine css3.css und eine css3-graphics.css. Passiert aber gar nichts, wenn ich dasselbe dort mache wie in http://www.aupair-international.de/test/border-radius2.html
Ich dachte, ich hätte das schon gesagt:
Nun könnte man sagen, schön damit wäre mein Problem gelöst, doch leider gefehlt. Die Drupal-Installation ignoriert auch den führenden Slash und den relativen Pfad. Das Gleiche gilt auch für eine URL mit http:// Es geht also weder noch.
Wenn du meine Startseite im Internet-Explorer öffnest (IE 8), dann siehst du doch selbst, dass weder die Schatten, die Textverläufe noch die Kurven angezeigt werden:
http://www.aupair-international.de
Danke.
htc
am 28.07.2011 - 10:55 Uhr
vielleicht ist deine htc datei auch murks, probiere es doch mal mit einer anderen Lösung. Stichwort CSS3PIE.
Wenn du damit auch Probleme hast was das einbinden betrifft kannst du auf das entsprechende Modul dazu zurückgreifen http://drupal.org/project/css3pie
Nutzt einfach das Modul
am 28.07.2011 - 12:29 Uhr
Nutzt einfach das Modul unten.
Im deinem CSS ist KEINE Einbindung von htc zu sehen!!!
Das am Ende der css3_graphics: /* css3 Support IE 6 7 8 */
behavior: url(ie-css3.htc);
/* This lets IE know to call the script on all elements which get the 'box' class */
funktioniert NICHT!! Muß bei jeder Dekalration stehen!!!
Danke
am 28.07.2011 - 13:25 Uhr
Hallo Nevson,
nein, denn bei http://www.aupair-international.de/test/border-radius2.html funktioniert sie doch. Warum sollte sie dann unter drupal murks sein. Aber ich probiere mal deinen Tipp aus.
Ich denke, dass die PIE.htc auch keinen Unterschied macht.
Aber danke.
Sorry
am 28.07.2011 - 13:54 Uhr
Offenbar hatte ich zwischendurch die falsche Version hochgeladen, hier mal ein Auszug aus der aktuellen css3-graphics.css:
.cssgradients #navigation-primary h2 > a,.cssgradients #navigation-primary > ul > li > a{
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, #ffd3d3),color-stop(0.4, #ff5555));
background: -moz-linear-gradient(top center,#ffd3d3,#ff5555 40%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd3d3', endColorstr='#ff5555');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#ffd3d3', endColorstr='#ff5555')"; /* For Internet Explorer 8 */
behavior(/ie-css3.htc);}
Und hier ein Auszug aus der aktuellen css3.css
.borderradius #navigation-primary a{border-radius: 5px 5px 0 0;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
behavior(/ie-css3.htc);
}
Bei http://www.aupair-international.de/test/border-radius2.html geht es, bei http://www.aupair-international.de geht es eben nicht, obwohl ich doch die entsprechenden Dateien korrekt einbinde.
Bernd
also der ie lädt die css
am 28.07.2011 - 14:06 Uhr
also der ie lädt die css nicht. schalte mal das caching ein. sind anscheinend wieder zu viele css dateine
oslt2 schrieb ... Und hier
am 28.07.2011 - 15:30 Uhr
...
Und hier ein Auszug aus der aktuellen css3.css
.borderradius #navigation-primary a{border-radius: 5px 5px 0 0;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
behavior(/ie-css3.htc);
}
eigentlich ist es der Pfad wieder behavior(/ie-css3.htc), versuche es doch mal mit einem absolutem Pfad.
Absolute Adresse
am 28.07.2011 - 15:57 Uhr
Okay
.borderradius #navigation-primary a{border-radius: 5px 5px 0 0;
-moz-border-radius-topleft: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-left-radius: 5px;
-webkit-border-top-right-radius: 5px;
behavior(/var/www/html/web701/html/drupal/ie-css3.htc);
}
Laden der css3 Sytelsheets im IE
am 28.07.2011 - 16:02 Uhr
Also im Quelltext sieht das so aus:
@import url("http://www.aupair-international.de/sites/all/themes/marinelli/css/css3/css3.css?lp1cir");
@import url("http://www.aupair-international.de/sites/all/themes/marinelli/css/css3/css3_graphics.css?lp1cir");
schalte mal das caching ein
Das verstehe ich nicht ganz. Kann ich dann noch an den Stylesheets arbeiten? Muss ich dann den Cache löschen. Wo finde ich denn diese Einstellung?
Bernd
absolut
am 28.07.2011 - 16:17 Uhr
Absolut bedeutet http://www.aupair-international.de/pfad_zu_deiner_datei
oslt2 schrieb Also im
am 28.07.2011 - 16:25 Uhr
Also im Quelltext sieht das so aus:
@import url("http://www.aupair-international.de/sites/all/themes/marinelli/css/css3/css3.css?lp1cir");
@import url("http://www.aupair-international.de/sites/all/themes/marinelli/css/css3/css3_graphics.css?lp1cir");
schalte mal das caching ein
Das verstehe ich nicht ganz. Kann ich dann noch an den Stylesheets arbeiten? Muss ich dann den Cache löschen. Wo finde ich denn diese Einstellung?
Bernd
ja, wenn du das caching wieder deaktivierst. aber der ie kann amx. 31 oder 32 stylesheets laden...