Verschiedene Stylesheets für IE6 und IE7/FF

[Matze]

Hi,

ich habe ein blödes Problem mit meinem Blog. In FF/IE7 benötige ich in einer css-Klasse folgende Eigenschaft:

Code:

margin-left: 62px;

im IE6 jedoch

Code:

margin-left: 32px;

Bisher habe ich den Browser ausgelesen und im Falle des IEs zusätzlich eine Stylesheet-Datei eingebunden, die ein paar Klassen überschreibt:

Code:

<?php
  if (eregi("MSIE", getenv("HTTP_USER_AGENT")) ||
    eregi("Internet Explorer", getenv("HTTP_USER_AGENT"))) {
?>

Doch nun geht das nicht mehr, da der IE7 die Darstellung wie Firefox hat und der IE6 die alte.

Microsoft empfielht sogenannte Conditional Comments:

Code:

<!--[if !IE 7]>
  ...
<![endif]-->

Ist es wirklich die beste Möglichkeit, für die IE-Versionen ungleich 7 eine andere Stylesheet-Datei einzubinden (man soll angeblich auf css-Hacks verzichten, ich wüsste nicht mal, was genau css-Hacks sind ^^) oder soll ich das irgendwie anders lösen? Denn diese Conditional Comments kann man leicht mit den Template-Switches verwechseln, finde ich.

[S2B]

Wo sollen denn diese switches verwendet werden? In den CSS-Dateien? Wenn ja, dann würde ich im Moment davon abraten, da sie zumindest in CSS 2.1 noch nicht enthalten sind. Ich würde an deiner Stelle auf einen CSS-Hack zurückgreifen, auch wenn man das nicht verwenden soll. :roll:

Code:

// diese Anweisung funktioniert nur bei IE <= 6
* html .deine_klasse {

}

[Matze]

Zitat:

Zitat von S2B

Wo sollen denn diese switches verwendet werden? In den CSS-Dateien?

Ne, in html-dateien, es sind ja schließlich html-Kommentare.

Zitat:

Zitat von S2B

Ich würde an deiner Stelle auf einen CSS-Hack zurückgreifen, auch wenn man das nicht verwenden soll. :roll:

Code:

// diese Anweisung funktioniert nur bei IE <= 6
* html .deine_klasse {

}

Dann werde ich das vorerst so machen, dankesehr.

[DGL-luke]

Diese Conditional Comments sind ganz pöhse Microsoft-Erfindungen. Die gibts in keinem Standard! :warn:

;)

[jfheins]

aber sie sind imho trotzdem die saubersten Lösungen für solch ein Problem ...

(Benutz ich auch auf meiner Website ...)

[alcaeus]

Zitat:

Zitat von DGL-luke

Diese Conditional Comments sind ganz pöhse Microsoft-Erfindungen. Die gibts in keinem Standard! :warn:

Solange man die Conditional Comments nur braucht, um den IE dazu zu bringen, etwas korrekt darzustellen, ist egal ob sie in einem Standard stehn. Firefox muss die ja nicht koennen, denn solange es Kommentare sind, werden sie ja ignoriert. Sei lieber froh dass es etwas gibt, mit dem du die Extra-Style-Sheets fuer die alten (schlechten) IE-Versionen einbinden kannst :roll:

Greetz
alcaeus

[Delphi-Freak]

Naja, das mit CSS (* html) sind AFAIK keine Conditional Comments. Eigentlich sind das doch nur diese Kommentare in HTML: http://msdn.microsoft.com/workshop/a...omment_ovw.asp :gruebel:

LG, ich

[KingIR]

Zitat:

Zitat von Matze

Zitat:

Zitat von S2B

Ich würde an deiner Stelle auf einen CSS-Hack zurückgreifen, auch wenn man das nicht verwenden soll. :roll:

Code:

// diese Anweisung funktioniert nur bei IE <= 6
* html .deine_klasse {

}

Dann werde ich das vorerst so machen, dankesehr.

Ganz schlechte idee imho, MS selbst (bzw. einer der IE-Entwickler) empfiehlt das *nicht* zu tun[1], sondern saubere Conditional Comments zu verwenden. Da diese von allen anderen Browsern einfach als Kommentar behandelt werden, ist das, wie alcaeus bereits erwähnt hat, eine absolut saubere Lösung.

[1] http://blogs.msdn.com/ie/archive/2005/10/12/480242.aspx

[S2B]

Zitat:

Zitat von Delphi-Freak

Naja, das mit CSS (* html) sind AFAIK keine Conditional Comments.

Das habe ich auch nie gesagt, das ist ein simpler CSS-Hack. :wink:
Außerdem verstehe ich nicht, warum man CSS-Hacks jetzt plötzlich nicht mehr anwenden soll. Vorher haben sie einem jahrelang keine Alternative gelassen und plötzlich sagen sie, dass man es nicht machen sollte. :roll: Solange die angewendeten Hacks kompatibel zu allen anderen Browsern sind, werde ich auch weiterhin CSS-Hacks einsetzen.

Edit: @KingIR: Ich werde zu 100% keinen Kommentar in meinen HTML-Quellcode schreiben, nur um die Website im IE6 besser darzustellen, denn ich lagere mein CSS ja nicht ohne Grund aus. :roll:

[KingIR]

Zitat:

Zitat von S2B

Edit: @KingIR: Ich werde zu 100% keinen Kommentar in meinen HTML-Quellcode schreiben, nur um die Website im IE6 besser darzustellen, denn ich lagere mein CSS ja nicht ohne Grund aus. :roll:

Das widerspricht sich aber nicht. Man lagert den CSS-Code aus, um das Layout vom Inhalt zu trennen, soll heißen, um das Layout nur über die CSS-Datei(en) ändern zu können, ohne den HTML-Code anzufassen.
So, nun habe ich z.B. eine Datei style.css die für alle Browser eingebunden wird (und deren Dateiname ja auch schon im HTML-Code hinterlegt sein muss) und eine Datei ie6fixes.css, die genauso aus dem HTML-Code referenziert wird, nur dass eben noch ein "spezieller" Kommentar außenrum ist. Sehe da kein Problem, Layout und Inhalt sind weiterhin streng getrennt. :)

[S2B]

So war das nicht gemeint. Ich meinte damit eher, dass ich ungern CSS-Code in style-Tags schreibe. Und so viele Änderungen sind es normalerweise nicht, dass sich eine extra css-Datei lohnen würde. :wink: Außerdem reiße ich dann den CSS-Code komplett aus dem Zusammenhang (in meiner CSS-Datei).

[KingIR]

Man muss ja keine komplett neue CSS-Datei erstellen, auch <style>-Tags braucht man keine, denn Angaben aus ie6fixes.css können doch die aus style.css überschreiben. :) Beispiel:

Code:

/* style.css */

body {
  margin: 20%;
  font-family: sans-serif;
}

h1 {
  /* ... */
}

p {
  line-height: 1.5em;
}

/* usw... */

Code:

/* ie6fixes.css */

body {
  margin: 30%;
}

Code:

<link rel="stylesheet" type="text/css" href="/css/style.css" />

<!--[if lt IE 7]>
  <link rel="stylesheet" type="text/css" href="/css/ie6fixes.css" />
<![endif]-->

Damit würde dann der margin-Wert aus style.css (20%) von allen Browser außer dem IE angewendet, welcher als einziger die 30% nehmen würde, alle anderen Angaben aber aus der style.css (deren Referenz ja nicht in einem Cond. Comm. verpackt ist) übernimmt. Dazu ggf noch einen netten Kommentar in die ie6fixes.css in dem erklärt wird, was der entsprechende Fix bewirkt. :)

[S2B]

Ich weiß schon, dass das so gehen würde, aber ich habe meinen Code lieber genau da, wo ich ihn haben möchte. Außerdem ist mir ein Browser, der seit mehreren Jahren kein vernünftiges Update (= "Parsing-Fehler-behebend") mehr hatte, nicht soo wichtig, als dass ich dafür mein Stylesheet zerschneiden würde. Ich finde es ansich schon ziemlich seltsam, dass von Seiten der MS-Entwickler ein Feature wie diese Conditional Comments in den Browser eingebaut wurde. Das kommt bei mir irgendwie so raus, als ob sich "gefälligst jeder nach dem IE richten soll, egal, ob es Updates gibt oder nicht."

Nichts für Ungut, ich bin nicht ein grundsätzlicher MS-Kritiker, aber sich auf einem Quasi-Monopol (Browser) auszuruhen finde ich einfach nur unprofessionell und eine Zumutung für die Benutzer und die Entwickler. Hätte es eine 6.5 gegeben, sähe meine Meinung vielleicht ganz anders aus.

[KingIR]

Zitat:

Zitat von S2B

Ich weiß schon, dass das so gehen würde, aber ich habe meinen Code lieber genau da, wo ich ihn haben möchte.

Oki, ist Geschmackssache :)

Zitat:

Außerdem ist mir ein Browser, der seit mehreren Jahren kein vernünftiges Update (= "Parsing-Fehler-behebend") mehr hatte, nicht soo wichtig, als dass ich dafür mein Stylesheet zerschneiden würde. Ich finde es ansich schon ziemlich seltsam, dass von Seiten der MS-Entwickler ein Feature wie diese Conditional Comments in den Browser eingebaut wurde. Das kommt bei mir irgendwie so raus, als ob sich "gefälligst jeder nach dem IE richten soll, egal, ob es Updates gibt oder nicht."

Nichts für Ungut, ich bin nicht ein grundsätzlicher MS-Kritiker, aber sich auf einem Quasi-Monopol (Browser) auszuruhen finde ich einfach nur unprofessionell und eine Zumutung für die Benutzer und die Entwickler. Hätte es eine 6.5 gegeben, sähe meine Meinung vielleicht ganz anders aus.

Full ACK! :thumb:
Ist ja auch nicht so, dass ich einen Browser mit fünf Jahre alter Rendering Engine, der zudem noch Standards weitgehend ignoriert, irgendwie lobe oder schön rede ;)
Wollte nur den Weg aufzeigen, inwiefern man ihn beschreitet ist eine andere Frage. Habe selbst auch mit dem IE6 insofern abgeschlossen, dass er meine standardkonforme Seite völlig verwurschtelt (Grafiken etc. völlig deplatziert, den Inhalt kann man aber noch lesen) hat, während sowohl Gecko und Opera als auch der IE7 prima damit klar kommen. Im Endeffekt habe ich mir dann gesagt, "IE6 benutzen? Selber schuld!", was dann in einem großen roten Banner für IE6-User (dank Conditional Comments :-D) mit Firefox-"Werbung" über der verwurschelten Seite resultiert ist. :cyclops:

[SirThornberry]

eins versteh ich nicht. Du liest bisher mit

Code:

<?php 
  if (eregi("MSIE", getenv("HTTP_USER_AGENT")) || 
    eregi("Internet Explorer", getenv("HTTP_USER_AGENT"))) { 
?>

aus ob es der ie ist oder nicht. Was hindert dich dort noch mit auszulesen welche IE-Version es ist - wird doch vom IE mit gesendet.

[Matze]

Zitat:

Zitat von SirThornberry

eins versteh ich nicht. Du liest bisher mit [...] aus ob es der ie ist oder nicht. Was hindert dich dort noch mit auszulesen welche IE-Version es ist - wird doch vom IE mit gesendet.

Ich weiß nicht, ob das eine so tolle Lösung ist (der Code muss beim Blog eh nicht so toll sein, sonst müsste ich das komplette Wordpress neu schreiben), aber damals habe ich das eben so gemacht. Ich wusste nicht, dass man die version des Browsers auch mit auslesen kann, sonst hätte ich das sicher so umgesetzt.