✔ IE - Weiche / Hack

Status
Nicht offen für weitere Antworten.
C

cosmanova

Mitglied
Hallo :)

Ich hatte jetzt das Problem, dass eine mit marging positionierte Box im IE (6) und Firefox unterschiedlich angezeigt wurden. Das heißt, dass der Firefox die wert px-Angabe anders interpretiert als der IE.

Nun habe ich von diesen tollen IE-Weichen gelesen und gleich eine eingebaut - und siehe da es funktioniert.

Nun habe ich aber auch gelesen, dass genau diese Weichen beim IE 7/8 Probleme machen und sie da auch nicht mehr funktinieren ?

Leider habe ich nichts im Netz gefunden, wie man dieses Problem nun lösen könnte.

Wie macht ihr das ? Habt ihr eine Idee ?



Noch eine Frage: Würde die Weiche auch beim IE 4 funktionieren ?

*************************************************

.sidemenu { /* Firefox, Opera & CO */
width: 155px;
height: 300px;
float: left;

margin: 0px 0px 0px 19px;
}

* html .sidemenu { /* nur für Internet-Explorer*/
margin: 0px 0px 0px 9px; /* Version 5.x */
ma\rgin: 0px 0px 0px 9px; /* Version 6 */
}


Viele Grüße
Cosmi
 
Hi,

verwende Conditional Comments, um den unterschiedlichen IE-Versionen ihr individuelles Stylesheet zuzuführen.

Alternativ zum "Star-HTML-Hack" liesse sich die Korrektur für die älteren IE-Versionen auch mit der !important-Regel vornehmen:

Code: 
.sidemenu { 
width: 155px;
height: 300px;
float: left;
margin: 0 0 0 19px !important; /* Firefox, Opera & CO */
margin: 0 0 0 9.5px; /* IE 5.01, 5.5, 6 */
}
cosmanova hat gesagt.:
Ich hatte jetzt das Problem, dass eine mit marging positionierte Box im IE (6) und Firefox unterschiedlich angezeigt wurden. Das heißt, dass der Firefox die wert px-Angabe anders interpretiert als der IE.
Zum Vergrößern anklicken....
Nicht die modernen Browser, wie z.B. Firefox, interpretieren die margin-Angabe anders, sondern in diesem Fall die älteren IE-Versionen (5.01, 5.5, 6), die bei floatenden Boxen zu gerne die margin-Werte verdoppeln, auch als "Doubled-Float-Margin-Bug" bekannt.
 
Vielen Dank schon mal.

"Doubled-Float-Margin-Bug" -> Genau das ist das Problem :)

Hab mir jetzt Conditional Comments angeschaut. Findet man ja nicht allzu viel darüber. Das Grundprinzip verstehe ich, aber an der Umsetzung hapert es.

Ich plaziere den Code ja in <body> oder <head> aber wie muss den der HTML-Code aussehen, dass ich darüber der Box quasi andere margin-Werte (oder auch andere Eigenschaftswerte) zuordnen kann ?

Hab schon ein wenig rumgetüftelt aber komme nicht so recht weiter.

Und heißt das nun, dass grundsätzlich kein Star-HTML-Hack eingesetz werden sollte, da dies eben im IE 7/8 zu Fehlern führt ?

Das !important gilt nur für die alten Browser ?
 
Der "Conditional Comment" wird nach dem "nomalen" Stylesheet notiert, also:

Code: 
<head>
    ...
    <link rel="stylesheet" type="text/css" href="style.css">
    <!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" href="style_ie.css">
    <![endif]-->
    ...
</head>
Mit dem Operator "lt" (less-than, kleiner als) wird das Stylesheet nur von den Vorgängerversionen des IE7 in das Dokument geladen.

Vom obigen Beispiel ausgehend würde der CSS-Code dann folgendermaßen lauten:

style.css
Code: 
.sidemenu { 
width: 155px;
height: 300px;
float: left;
margin: 0 0 0 19px;
}
style_ie.css
Code: 
.sidemenu { 
margin: 0 0 0 9.5px; 
}
Die !important-Regel gilt für die modernen Browser und veranlasst sie, die nachfolgende gleichlautende CSS-Eigenschaft (im obigen Fall die margin-Eigenschaft) zu ignorieren.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück