IE: alternatives CSS einbinden

[assmaje]

Wie kann ich definieren, dass zum Beispiel...

#beispiel {
     position:fixed;
}

...im IE bis zur Version 6 so aussieht:

#beispiel {
     position:absolute;
}

Hab in SelfHTML was gefunden, dort steht aber nur, wie man ein völlig neues Stylesheet für bestimmte IE-Versionen einbinden kann. Ich möchte aber nur einzelne Werte und Eigenschaften für den jeweiligen IE verändern.

Würde mich freuen, wenn mir jemand helfen könnte.

 

[neuroleptika]

.. Ich möchte aber nur einzelne Werte und Eigenschaften für den jeweiligen IE verändern.
..

Die Werte der zweiten css-Datei überschreiben nur die der ersten.
Die anderen Anweisungen werden nicht berührt.
Ein Beispiel für conditional comments mit @import (IE7 und IE5-6 getrennt):

  <style type="text/css">
/* <![CDATA[ */
@import "style/standard.css";
/* ]]> */
  </style>

<!--[if lt IE 7]>
<style>
@import "style/ie5-6.css";
</style>
<![endif]-->

<!--[if IE 7]>
<style>
@import "style/ie7.css";
</style>
<![endif]-->

if lt IE 7 spricht nur Internet Explorer unter Ver. 7 an.
Der IE8 würde nur die standard.css berücksichtigen.

Das funktioniert auch mit der üblichen href-Methode.
@import wird erst ab IE5 und Netscape5 unterstützt. Was ich eher als Vorteil sehe.


Mit position: absolute; kann man aber den selben Effekt herstellen.
position: fixed hat den Nachteil, daß nur von der oberen, linken Browserecke aus positionieren werden kann.

 

[assmaje]

Die Werte der zweiten css-Datei überschreiben nur die der ersten.
Die anderen Anweisungen werden nicht berührt.
Ein Beispiel für conditional comments mit @import (IE7 und IE5-6 getrennt):

  <style type="text/css">
/* <![CDATA[ */
@import "style/standard.css";
/* ]]> */
  </style>

<!--[if lt IE 7]>
<style>
@import "style/ie5-6.css";
</style>
<![endif]-->

<!--[if IE 7]>
<style>
@import "style/ie7.css";
</style>
<![endif]-->

if lt IE 7 spricht nur Internet Explorer unter Ver. 7 an.
Der IE8 würde nur die standard.css berücksichtigen.

Das funktioniert auch mit der üblichen href-Methode.
@import wird erst ab IE5 und Netscape5 unterstützt. Was ich eher als Vorteil sehe.


Mit position: absolute; kann man aber den selben Effekt herstellen.
position: fixed hat den Nachteil, daß nur von der oberen, linken Browserecke aus positionieren werden kann.

Damit muss ich aber wieder eine völlig neue CSS-Datei extra für IE x.x erstellen, oder hab ich was falsch verstanden? Geht das nicht auch innerhalb eines Stylesheets?

P.S.:
Meines Wissen kann man nicht nur von der linken oberen Ecke aus positionieren, sondern auch zum Beispiel so:

#beispiel {
      position:fixed;
      right:10px;
      bottom:20px;
}

 

[neuroleptika]

selektorenhack

Damit muss ich aber wieder eine völlig neue CSS-Datei extra für IE x.x erstellen, oder hab ich was falsch verstanden? Geht das nicht auch innerhalb eines Stylesheets?

Eine neue Datei schon aber sie muß nur die Änderungen enthalten. Das ganze css mußt du da nicht wiederholen.
Wenn du das nicht möchtest, gibt es noch die sogenannten Selektorenhacks.
Sie bauen auf Fehlern der Browser auf.
Für den IE6 sieht das so aus:

* html #beispiel {
      position:absolute;
      right:10px;
      bottom:20px;
}

Für den IE7 ginge das so:

* +html #beispiel {
      ...
}

Die css-Datei ist dann aber nicht mehr valide. Das stört zwar keinen Browser, könnte aber bei der Fehlersuche mit dem w3c-Validator stören.

Du kannst das css auch direkt in den conditional comment schreiben:

<!--[if lt IE 7]>
<style>
body {
position: absolute;
right: 10px;
bottom: 20px;
}
</style>
<![endif]-->

P.S.:
Meines Wissen kann man nicht nur von der linken oberen Ecke aus positionieren, sondern auch zum Beispiel so.....

Ja das stimmt. Mann kann so von jeder Ecke aus positionieren. Allerdings nicht von einem ebenfalls positionierten Elternelement aus, sondern immer nur vom Browserfenster aus. Ich verwende position: fixed nicht mehr.

 

[assmaje]

Eine neue Datei schon aber sie muß nur die Änderungen enthalten. Das ganze css mußt du da nicht wiederholen.

Danke!! :-D
Hab die beiden Sätze übersehen:

Die Werte der zweiten css-Datei überschreiben nur die der ersten.
Die anderen Anweisungen werden nicht berührt.

Muss standard.css so "seltsam" eingebunden werden? Hat es einen bestimmten Grund oder funktioniert es auch normal? Ich benutze nämlich einen PHP-Code, um standard.css und psp.css (wird nur auf der PSP angezeigt) einzubinden.

 

[neuroleptika]

Danke!! :-D
Hab die beiden Sätze übersehen:........

Noch einen:

Das funktioniert auch mit der üblichen href-Methode.
@import wird erst ab IE5 und Netscape5 unterstützt. Was ich eher als Vorteil sehe.

Kannst du also machen wie du willst.

 

[assmaje]

Danke!! :)