✔ <!--[if IE]> und Speichermethode

[Sebigf]

Hallo zusammen !

Ich habe bisher verschiedene Methoden benutzt, um zwischen den IE und FF Styles zu unterscheiden.

Nun habe ich mich dazu entschlossen, es mit <!--[if IE]> zu machen. Meine Frage dazu lautet, ob es dazu mehrere Varianten gibt, sodass ich für jeden Browser alles gerecht einsetzen kann...

UND


Ich arbeiten mit einem Template-System (nicht Smarty) und habe überlegt, den Style auch in ein Template zu verlegen. Nur meine Frage lautet, ob so etwas Sinn macht, oder nur unnötig perf. kosten würde...

Danke

 

[Maik]

In dem Kapitel SELFHTML: Stylesheets / CSS-basierte Layouts / Browserweichen / Alternative CSS-Dateien für den Internet Explorer findest du eine Auflistung für die unterschiedlichen IE-Versionen.

 

[Sebigf]

Alles klar, danke für den Link

Hast du noch eine Antwort auf die Speichermethode ?


#### Server ist atm schwer langsam...

Gibt es auch bestimmte Methoden, für den Opera bzw. andere Browser (MAC, Lunix...) ?

 

[Sebigf]

So, ich habe ein wenig mit den Methoden gearbeitet...

So habe ich das ganze verwendet:

<link href="/styles/template_32/main.css" rel="Stylesheet" type="text/css"/>

<!--[if IE]>
<link href="/styles/template_32/ie.css" rel="Stylesheet" type="text/css"/>
<![endif]-->

<!--[if lt IE 6]>
<link href="/styles/template_32/ie5.css" rel="Stylesheet" type="text/css"/>
<![endif]-->
<!--[if IE 6]>
<style type="text/css">/styles/template_32/ie6.css</style>
<![endif]-->

<!--[if gt IE 6]>
<link href="/styles/template_32/ie7.css" rel="Stylesheet" type="text/css"/>
<![endif]-->

<link href="/styles/template_32/op7.css" rel="Stylesheet" type="text/x-opera-css;charset=utf-8"/>

Nun ist es so, dass ich "padding" einsetzen möchte....

FF = addiert den Padding-Wert zu width
IE = interpretiert Padding-Wert als "inklusive" von width

Wie kann ich da vorgehen mit den Weichen ? Irgendwie funktioniert das nicht richtig.
In der main.css habe ich alles codes... In den einzelnen z.b. ie6.css habe ich die selbe Klassen nochmal neu mit anderen werten. Kann mir da jemand helfen ?

Danke

 

[Maik]

Die einfachste Lösung wäre doch, die padding-Eigenschaft auf die eingebetteten Elemente zu übertragen, damit der IE das Boxmodell nicht falsch interpretieren kann

Ansonsten müsstest du dich der CSS-Hacks bedienen, um die Boxenbreiten für den IE anzupassen.

 

[Sebigf]

Ich verstehe die Antwort nur zu Hälfte Wo einbetten ?


Hast du vielleicht ein Beispiel zu Hand ?

 

[Maik]

Na klar

In diesem Beispiel wird die padding-Regel auf das eingebettete DIV angewendet:

div.box {
width: 400px;
border: 1px solid #000;
}

div.box div.padding {
padding: 10px;
}

<div class="box">
     <div class="padding">dummy text</div>
</div>

Das Ganze könnte aber auch mit der margin-Eigenschaft umgesetzt werden:

div.box {
width: 400px;
border: 1px solid #000;
}

div.box div.margin {
margin: 10px;
background: #efefef;
}

<div class="box">
     <div class="margin">dummy text</div>
</div>

Der Trick liegt darin, die Angabe zum Innen- und/oder Außenabstand nicht mit der Breiten-/Höhenangabe eines Elements zu kombinieren, damit der IE 5, 5.5 und 6.0 (im Quirksmodus) das Boxmodell erst garnicht falsch interpretieren kann.