Css Quellcode, weichen für iexplorer oder anderen Browsern?

xero · #1 (**permalink**) 22.06.2007, 12:23

Hey,

mich interessiert schon lange, wie man im css Code weichen für andere Broser erstellen kann? Z.B. nur für iexplorer 5 ein anderen code?

Hab edas imemr was gelesen von If ?

Aber wie genau funktioniert das? bzw. Woher weiß dann der eine Browser das er den code und der andere das er die weiche nehmen muss?

ArcVieh · #2 (**permalink**) 22.06.2007, 12:32

Conditional Comments von Microsoft, eingeführt ab IE5.

Es gibt aber auch Hacks, so genannte Hacks nutzen Schwächen/Fehler in den verschiedenen Browsern aus.

Zum Beispiel Tantek Hack für den IE5, gut geeignet um das Box-Modell zu fixen.

Code:

<div>Eine Box</div>

Code:

div {
   padding:0 10px;
   width:240px; /* Angaben IE5 */
   voice-family:"\"}\"";
   voice-family:inherit;
   width:200px; /*Angaben für Standardkonforme Browser */
}

Der IE5 ignoriert das Escape Zeichen, für ihn sieht das folgendermasen aus: voice-family:""}
Leider hat Opera 5 die gleiche Schwäche.

Daher hat Tantek folgendes hinzugefügt:

Code:

html>body div {
   width:200px;
}

Kind-Selektor Hack.

Ich habe gelesen das der Hack als sehr sicher gilt, da so ein Fehler in spätere Browser garantiert nicht noch einmal eingebaut wird.

Aber Conditional Comments sind da die beste Lösung.

xero · #3 (**permalink**) 22.06.2007, 12:41

Vielen dank, gelten die Conditional Comments auch für Firefox oder sonstige Browser? Wenn nicht, was macht man dann für Firefox, Opera?

ArcVieh · #4 (**permalink**) 22.06.2007, 12:43

Zitat:

Zitat von xero

Vielen dank, gelten die Conditional Comments auch für Firefox oder sonstige Browser? Wenn nicht, was macht man dann für Firefox, Opera?

Nein. Nur der IE interpretiert Conditional Comments, kein anderer Browser.
Für den Firefox und Opera finde ich es gänzlich unnötig Hacks einzusetzten.
(Okay, vllt. ältere Opera Versionen

)

Aber bei Opera und Firefox und anderen Gecko Abkömmlingen solltest Du eher auf Antworten anderer warten, darum habe ich mich noch nicht gekümmert.

xero · #5 (**permalink**) 22.06.2007, 12:56

Okey, habe mir die Seite mal angeguckt.

Code:

<!--[if IE 5]>

<![endif]-->

Also hier müsste was rein, was nur für den Iexplorer 5 gelten soll?
Müsste es dann so aussehen:

Code:

#c {
width: 200px;
font-size: 11px;
}

<!--[if IE 5]>
#c {
width: 200px;
font-size: 18px;
}
<![endif]-->

Nur als Beispiel? Und was müste man machen, wenn man alles ab version 6 geändetr haben will?

Gumbo · #6 (**permalink**) 22.06.2007, 13:08

Die Conditional Comments nutzen HTML-Kommentare aus und können daher auch nur im HTML-Dokument eingesetzt werden.

xero · #7 (**permalink**) 22.06.2007, 13:16

Hmm, aber wie müsste ich das dann machen? so:

Code:

<div id="c"></div>

<!--[if IE 5]>
<div id="d"></div>
<![endif]-->

Wenn ja, wie müsste ich das dann machen, wenn ich alles ab Version 6 geändert haben will?

ArcVieh · #8 (**permalink**) 22.06.2007, 13:22

Zitat:

Zitat von xero

Hmm, aber wie müsste ich das dann machen? so:

Code:

<div id="c"></div>

<!--[if IE 5]>
<div id="d"></div>
<![endif]-->

Wenn ja, wie müsste ich das dann machen, wenn ich alles ab Version 6 geändert haben will?

Jaien.

Code:

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

Oder diese Methode hier.

xero · #9 (**permalink**) 22.06.2007, 13:29

Ist das uf dem Link nicht das gleiche iwe bei mir?

Du hattest jaein gesagt, was ist denn daran falsch? Muss ich extra für ein Code eine neie Css Datei nur für Iexplorer erstellen?

ArcVieh · #10 (**permalink**) 22.06.2007, 13:39

Zitat:

Zitat von xero

Ist das uf dem Link nicht das gleiche iwe bei mir?

Du hattest jaein gesagt, was ist denn daran falsch? Muss ich extra für ein Code eine neie Css Datei nur für Iexplorer erstellen?

Bei der Methode von dem Link wir nur ein extra Div um den ganzen Seitenaufbau gezogen. Dort im Beispie mit der ID IEroot. Man kann dann in der CSS über div#IEroot extra Werte für den IE positionieren

Du hingegen hast einfach ein Div dahingepackt. Sinn?
Und mit der Stylesheet einbinden habe ich dir lediglich die übliche Methode gezeigt.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
CSS in versch. Browsern	br16	CSS	0	05.04.2008 14:35
text verschiebt sich in anderen browsern	mol66	CSS	0	16.01.2008 10:00
Lightbox mit zweiter CSS Datei funktioniert nicht	T4ke	CSS	12	11.12.2007 19:20
CSS Tips & Tricks	Webnauts	Ressourcen	0	25.08.2006 23:04
iexplorer 6.0 / mozilla 1.6 css hover problem	titze	CSS	4	15.08.2004 11:31