mehrere stylesheets via CC für IE 5.0 einbinden...

[Mel]

Hallo,

ich binde meine stylesheets folgendermassen ein:

<style type="text/css">
<!--@import"/templates/css/basics.css";-->
</style>

<style type="text/css">
<!--@import"/templates/css/footer.css";-->
</style>

<style type="text/css">
<!--@import"/templates/css/navi.css";-->
</style>

<!--[if IE 6]>
<style type="text/css">@import url(/templates/css/ie.css);</style>
<![endif]-->

<!--[if lte IE 5.5000]>
<style type="text/css">@import url(/templates/css/basics.css);</style>
<![endif]-->

<!--[if lte IE 5.5000]>
<style type="text/css">@import url(/templates/css/footer.css);</style>
<![endif]-->

<!--[if lte IE 5.5000]>
<style type="text/css">@import url(/templates/css/navi.css);</style>
<![endif]-->

<!--[if lte IE 5.5000]>
<style type="text/css">@import url(/templates/css/ie.css);</style>
<![endif]-->

Damit schiesse ich den IE Mac aus. Der IE 5.0 Windows jedoch sollte schon berücksichtigt werden. Deshalb die Conditional Comments <!--[if lte IE 5.5000]>.... Funktioniert auch mit EINER Datei. Bei mehreren aber anscheinend nicht..oder steh ich da grad auf dem Schlauch??

Angezeigt wird jetzt im IE 5.0 Win nämlich gar nix mehr bzw. nur noch Fragmente...

Vg Melanie

[Cyx23]

Hallo,

Damit schiesse ich den IE Mac aus. Der IE 5.0 Windows jedoch sollte schon berücksichtigt werden. Deshalb die Conditional Comments <!--[if lte IE 5.5000]>.... Funktioniert auch mit EINER Datei. Bei mehreren aber anscheinend nicht..oder steh ich da grad auf dem Schlauch??

Angezeigt wird jetzt im IE 5.0 Win nämlich gar nix mehr bzw. nur noch Fragmente...

<!--[if lt IE 6]>... sollte ie5 und 5.5 bedienen.

Noch ein Beispiel für Conditional Comments für verschiedene IEs gibts hier: Browserweiche für externe Stylesheets

Grüsse

Cyx23

[Mel]

<!--[if lt IE 6]>... sollte ie5 und 5.5 bedienen.

Nein also wenn ich die anderen CC weglasse und nur den hier stehenlasse zeigt mir IE 5.0 nur reines html an...

[Cyx23]

Hallo,

<!--[if lt IE 6]>... sollte ie5 und 5.5 bedienen.

Nein also wenn ich die anderen CC weglasse und nur den hier stehenlasse zeigt mir IE 5.0 nur reines html an...

wenns an den conditional comments liegen sollte hilft dir das hier vielleicht zur Kontrolle
oder als weiteres Beispiel weiter: http://www.lipfert-malik.de/webdesign/tutorial/multiple-ie.html.

Ansonsten sollte IE5 ja auch mit einem einfachen @import url.. (ohne sreen o.ä.)
klarkommen, und die comments sollten sich eigentlich nicht gegenseitig stören.
?Klappt sowas bei dir:

<!--[if lt IE 5.1]>
<style>
@import url(/templates/css/ie.css);
</style>
<![endif]-->

Grüsse

Cyx23

[Mel]

HI,

?Klappt sowas bei dir:

<!--[if lt IE 5.1]>
<style>
@import url(/templates/css/ie.css);
</style>
<![endif]-->

Nee, das hab ich grad reingepastet...und der IE 5.0 nimmt es nicht an...immer noch reines html, was seltsam ist denn es heisst ja less than...strange...

Also es ist so sobald ich nur EINE css-Datei so einbinde:

<!--[if lte IE 5.5000]>
<style type="text/css">@import url(/templates/css/basics.css);</style>
<![endif]-->

dann klappt es. Ich hab aber meine gesamte CSS grad zur besseren Organisation aufgeteilt. Und schon klappt es nicht mehr. Ich will / muss halt auch unbedingt den IE Mac ausschliessen, denn die Umseztung dieses Designs ist ne Katastrophe für den IE allgemein (lauter fixierte Bereiche - nicht meine Idee btw) und beim IE Mac geht gar nix mehr damit ärgere ich mich nicht mehr rum...

aber egal es scheint wohl nicht zu gehen dass ich über diese Art und Weise mehrere CSS dateien hintereinander einbinde...aber das MUSS doch eigetnlcih gehen...kann doch gar nicht sein.

[Detlef G.]

Hallo Melanie

<!--[if lte IE 5.5000]>
<style type="text/css">@import url(/templates/css/basics.css);</style>
<![endif]-->

Ich habe jetzt keine 5er IEs zum testen hier, trotzdem einpaar Gedanken
meinerseits.
1. testen, ob es an den Conditional Comments liegt
   Dazu den kompletten Block in den body einfügen und dazu die
   Styleelemente duch Text ersetzen.
   Werden alle angezeigt?
2. Frage müssen die CSS-Dateien unbedingt über @import eingebunden werden,
   wenn die Browserzuordnung bereits über Conditional Comments erfolgt?

Wer weiß, woran sich der Browser aufhängt, an den mehrfachen Conditional
Comments, an den mehrfachen Stylebreichen, an den mehrfachen @import, oder
an einer Kombination davon.

Auf Wiederlesen
Detlef

[Ingo Turski]

Hi,

Ich hab aber meine gesamte CSS grad zur besseren Organisation aufgeteilt.

und erzeugst dadurch viele überflüssige Requests, die das Laden der Seiten je nach Browsereinstellung mehr oder weniger verzögern.
Du solltest Dich besser beschränken und ein Standard-CSS verwenden und ggfls. eine CSS-Datei über CC für die IEs. Hierin kannst Du dann _Korrekturen_ vornehmen und brauchst nicht das komplette CSS wiederholen. Für eine Unterscheidung von IE 6 und 5.x könntest Du hierin eine CSS-Weiche verwenden.
Allenfalls für Korrekturen beim IE 5.0x bietet sich eine zusätzliche Datei über <!--[if lt IE 5.1]> an.

freundliche Grüße
Ingo

[Mel]

Ich muss das aber aufteilen zur Organisation. Viele stylesheets treffen nur auf bestimmte Seiten zu (zugegeben nicht die footer und navi aber da kommen ja noch mehr)  und die will ich nicht bei der Startseite geladen haben, ich dachte auch das ist vernünftig so wie ich es mache, denn ich möchte die Startzeiten bei der index-seite ja so gering wie möglich halten.

Und warum ich das so verschachtelt aufgebaut habe--ich hab damals ewig rumprobiert wie man es machen muss um valide zu sein UND den IE 5 Mac auszuschliessen...

[Ingo Turski]

Hi,

Ich muss das aber aufteilen zur Organisation.

wieso? Ich kann auch _eine_ CSS-Datei vernünftig strukturieren.

Viele stylesheets treffen nur auf bestimmte Seiten zu (zugegeben nicht die footer und navi aber da kommen ja noch mehr)  und die will ich nicht bei der Startseite geladen haben, ich dachte auch das ist vernünftig so wie ich es mache, denn ich möchte die Startzeiten bei der index-seite ja so gering wie möglich halten.

kommt drauf an, wie umfangreich das CSS ist. U.U. mag es sinnvoll sein, das CSS in zwei Teilen auszuliefern, von denen nur einer für die Startseite benötigt wird. Spezielle Styles, die nur von einer bestimmten Seite benötigt werden, würde ich allerdings auch extra in eine CSS-Datei oder direkt in die HTML-Datei setzen - jedenfalls wenn das (evtl. auch erst in der Summe) sehr umgfangreich wird.
Die meisten wirklich großen CSS-Dateien lassen sich allerdings auch deutlich optimieren.

freundliche Grüße
Ingo

[Mel]

Hallo Ingo,

Ich wusste nicht dass es soviel Traffic erzeugt (oder was auch immer) wenn ich soviele style-sheets einbinde. Dann muss ich das wohl nochmal überdenken. Ich finde es halt sehr komfortabel nicht in einer langen css datei runterscrollen zu müssen um eine klasse z.b. zu ändern. Es ist halt so schön praktisch z.b.viele einzelne überschaubare Dateien zu haben - meiner Empfindung nach. Auch habe ich schon ganz oft Seiten gesehen die mehrere style-sheets einbinden. Es kommt bei grossen und vom design her anspruchsvollen seiten (um es mal so zu nennen) schon wirklich einiges zusammen, noch mehr wenn es sich um dynamische Seiten handelt, da müssen ja noch viel mehr Eventualitäten abgedeckt werden...

[Ingo Turski]

Hi,

Ich finde es halt sehr komfortabel nicht in einer langen css datei runterscrollen zu müssen um eine klasse z.b. zu ändern. Es ist halt so schön praktisch z.b.viele einzelne überschaubare Dateien zu haben - meiner Empfindung nach.

Tja, und ich finde es sehr komfortabel, in einer Datei nach einem Selektor suchen zu lassen und nicht erst zu +überlegen, in welcher Datei der denn stecken könnte oder ständig neue Dateien zu öffnen.
Außerdem ist eine Unterteilung nicht immer praktikabel. Stelle Dir den Fall vor, daß Du Links generell formatierst, Links mit einer Klasse anders und Links in bestimmten Bereichen wieder anders, wobei einige Definitionen überschrieben und andere hinzugefügt werden...

Es kommt bei grossen und vom design her anspruchsvollen seiten (um es mal so zu nennen) schon wirklich einiges zusammen, noch mehr wenn es sich um dynamische Seiten handelt, da müssen ja noch viel mehr Eventualitäten abgedeckt werden...

Jein. Bei einem gut geplantem HTML-Code nicht unbedingt. Das Problem bei solchen Mammut-CSS' ist meist unstrukturiertes HTML und viele unterschiedliche Seitenkonstruktionen, die eigentlich niocht nötig, aber halt "gewachsen" sind, d.h. es kam immer mal wieder eine neue Anforderung hinzu, die nicht in's Schema paßte und anstatt das Schema allgemeingültig zu erweitern, fängt man wieder was neues an.

freundliche Grüße
Ingo

[Mel]

Hallo Ingo,

hmm ist wohl eine andere Denkweise dann ;) Ich hab z.b eine basics.css und dann noch so specials wie newsletter.css, guestbook.css etc etc.

Da weiss ich eigentlich schon genau wo ich was suchen muss. Und gerade wenn ich halt weiss dass eine datei wirklich nur bei einer bestimmten Seite eingebunden werden muss dann liegt es für mich nahe diese auszulagern in extra-Datei und nur für diese Seite einzubinden.

zum zweiteren stimme ich Dir voll zu. Gut überlegtes html ist absolut das A und O einer guten Seite, davon hängt alles ab und um nicht in einen css-dschungel zu versinken kann ja vieles verallgemeinert werden...nunja ERfahrungswerte, wenn man einmal den Fehler eines solchen Chaos-Projektes gemacht hat dann ist man auch schlauer...

PS: __EXKURS__
hab übrigens Dein neues Tutorial mit dem Bildwechsel schon ausprobiert und sehr begeistert. Funktioniert ganz toll, erstaunlich dass diese Methode nicht so weit verbreitet ist.

[Ingo Turski]

Hi,

Ich hab z.b eine basics.css und dann noch so specials wie newsletter.css, guestbook.css etc etc.

Da weiss ich eigentlich schon genau wo ich was suchen muss. Und gerade wenn ich halt weiss dass eine datei wirklich nur bei einer bestimmten Seite eingebunden werden muss dann liegt es für mich nahe diese auszulagern in extra-Datei und nur für diese Seite einzubinden.

In diesem Fall finde ich das auch sinnvoll, wenn diese Seiten sich stark von den anderen abheben und das CSS so nicht bei jeder anderen Seite zur Verfügung gestellt werden braucht.

hab übrigens Dein neues Tutorial mit dem Bildwechsel schon ausprobiert und sehr begeistert. Funktioniert ganz toll, erstaunlich dass diese Methode nicht so weit verbreitet ist.

Kommt vielleicht noch? ;-)
Zumal ich kürzlich hier gelesen habe, daß neuere Jaws auch außerhalb des Viewports positionierte Elemente nicht mehr vorliest und somit das ALT-Attribut (und damit IMG) unverzichtbar wird.

freundliche Grüße
Ingo

[scherzkeks]

Tachchen

Ich würde anstatt

<!--[if lte IE 5.5000]>
<style type="text/css">@import url(/templates/css/basics.css);</style>
<![endif]-->

<!--[if lte IE 5.5000]>
<style type="text/css">@import url(/templates/css/footer.css);</style>
<![endif]-->

<!--[if lte IE 5.5000]>
<style type="text/css">@import url(/templates/css/navi.css);</style>
<![endif]-->

<!--[if lte IE 5.5000]>
<style type="text/css">@import url(/templates/css/ie.css);</style>
<![endif]-->

Vielleicht sowas wie

<!--[if lte IE 5.5000]>
<style type="text/css">@import url(/templates/css/basics.css);</style>

<style type="text/css">@import url(/templates/css/footer.css);</style>

<style type="text/css">@import url(/templates/css/navi.css);</style>

<style type="text/css">@import url(/templates/css/ie.css);</style>
<![endif]-->

nehmen.
Oder

<!--[if lte IE 5.5000]>
<style type="text/css">
@import url(/templates/css/basics.css);
@import url(/templates/css/footer.css);
@import url(/templates/css/navi.css);
@import url(/templates/css/ie.css);
</style>
<![endif]-->

Ich glaub aber, dass ich hier sowieso was nich so ganz richtig verstanden habe

Schönen Donnerstag noch

[Mel]

Hallo,

diese beiden Varianten hab ich schon probiert - und gerade zur Sicherheit nochmal - bringt leider nix, bzw. zeigt das gleiche an - nix bzw. fragmente.

Ich versteh grad auch nix mehr...

[Cyx23]

Hallo,

diese beiden Varianten hab ich schon probiert - und gerade zur Sicherheit nochmal - bringt leider nix, bzw. zeigt das gleiche an - nix bzw. fragmente.

Ich versteh grad auch nix mehr...

hast du irgendwo mal vollständigeren Beispielcode, URI der Testseite?

Grüsse

Cyx23

[Mel]

Link hab ich leider keinen, liegt auf so einem geschützten Testbereich,

aber hier Die html-Ausgabe nochmal:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1"/>

<title>phytolab -> Referenzsubstanzen</title>

<style type="text/css">
<!--@import"/templates/css/basics.css";-->
</style>

<style type="text/css">
<!--@import"/templates/css/footer.css";-->
</style>

<style type="text/css">
<!--@import"/templates/css/navi.css";-->

</style>

<!--[if IE 6]>
<style type="text/css">@import url(/templates/css/ie.css);</style>
<![endif]-->

<!--[if lte IE 5.5000]>
<style type="text/css">@import url(/templates/css/basics.css);</style>
<![endif]-->

<!--[if lte IE 5.5000]>
<style type="text/css">@import url(/templates/css/footer.css);</style>
<![endif]-->

<!--[if lte IE 5.5000]>
<style type="text/css">@import url(/templates/css/navi.css);</style>
<![endif]-->

<!--[if lte IE 5.5000]>
<style type="text/css">@import url(/templates/css/ie.css);</style>
<![endif]-->

</head>

<body>

[Cyx23]

Hallo,

aber hier Die html-Ausgabe nochmal:

klappt bei mir ohne Fehler auch mit win ie 5.01 und ie 5.5.

Sonst kannst du natürlich noch <link ... statt @import
bei den conditional comments verwenden, aber es sieht
ja eher danach aus als wenn sich dein ie 5 ungewöhnlich
a la ie 4 verhält.
Oder etwas in den CSS-Dateien, oder Pfad bzw. Server?

Grüsse

Cyx23

[Mel]

Hallo,

ich weiss es nicht ich bin ratlos. Es klappt ja wunderbar wenn ich alles in EINE CSS-Datei werfe aber halt nicht bei mehreren. Hast Du das wirklcih mit vier verschiedenen style-sheet dateien getestet? und das klappt?

[Cyx23]

Hallo,

ich weiss es nicht ich bin ratlos. Es klappt ja wunderbar wenn ich alles in EINE CSS-Datei werfe aber halt nicht bei mehreren. Hast Du das wirklcih mit vier verschiedenen style-sheet dateien getestet? und das klappt?

ja, und es klappt (mit deinem Code), allerdings habe ich mit relativen Pfaden getestet
(also "./templates...).
Hast du es übrigens schon so versucht?

<!--[if IE]>
 <link type="text/css" rel="stylesheet" href="/templates/css/ie.css">
<![endif]-->
<!--[if lt IE 6]>
 <link type="text/css" rel="stylesheet" href="/templates/css/basics.css">
 <link type="text/css" rel="stylesheet" href="/templates/css/footer.css">
 <link type="text/css" rel="stylesheet" href="/templates/css/navi.css">
<![endif]-->

Grüsse

Cyx23

[Mel]

Cyx23,

bist ein Schatz. Klappt perfekt.

Merci beaucoup,

mel