Wieder ein Internet Explorer Float - Bug
Cap
- css
0 Cheatah0 Cap
0 Martin Hölter0 Cap0 Axel Richter0 Axel Richter0 Cap
Hi,
ich habe wieder mal ein Problem mit dem IE und komme hier weder mit Lösungen zum "Box Model", noch zum "3 Pixel" - Bug weiter. Ich möchte im folgenden Beispiel den gleichen Abstand zwischen den beiden Divs hinbekommen. Bin für jeden Tip dankbar.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>Test</title>
<style type="text/css">
#main {
width:200px;
height:200px;
margin-left:203px;
background:#000;
}
#menu {
width:200px;
height:200px;
float:left;
background:#333;
}
* html #menu {
/* \*/
margin-right:-3px;
/* */
}
</style>
</head>
<body>
<div id="menu"> </div>
<div id="main"> </div>
</body>
</html>
Gruß
Cap
Hi,
ich habe wieder mal ein Problem mit dem IE
das sich da wie äußert?
Cheatah
Hi,
das sich da wie äußert?
Cheatah
Das Beispiel erzeugt einen größeren Abstand zwischen den Divs im IE, als im Firefox. Der Abstand ist immer 3px größer als im Firefox, aber die üblichen Tips für den "3 Pixel" - Bug bringen nichts.
Cap
Hi!
Sorry, kann dir bei deinem Problem nicht helfen, aber folgendes ist Quatsch:
* html #menu {
/* \*/
margin-right:-3px;
/* */
}
Wenn ich das recht sehe, wendest du dort 2 Hacks an, um den IE zu kriegen - ener reicht aber ;-)
Gruß
Martin
Hi,
Sorry, kann dir bei deinem Problem nicht helfen, aber folgendes ist Quatsch:
* html #menu {
/* \*/
margin-right:-3px;
/* */
}Wenn ich das recht sehe, wendest du dort 2 Hacks an, um den IE zu kriegen - ener reicht aber ;-)
Wieso 2 Hacks? Die 1. Zeile sorgt dafür, dass der neue Margin nur vom IE angenommen wird, die 2. und 4. schliessen den IE/Mac aus, da der den "3-Pixel"-Bug nicht hat.
Unabhängig davon ändert sich aber auch ganz ohne diesen Block nichts. Er ist in diesem Fall quasi wirkungslos.
Cap
Hallo,
* html #menu {
/* \*/
margin-right:-3px;
/* */
}
Unabhängig davon ändert sich aber auch ganz ohne diesen Block nichts. Er ist in diesem Fall quasi wirkungslos.
Ja, was hat auch margin-right mit dem Problem zu tun? Wäre es nicht sinnvoller hier margin-left:200px, also 3px weniger als bei standardkonformen Browsern zu setzen?
viele Grüße
Axel
Hallo,
Ja, was hat auch margin-right mit dem Problem zu tun? Wäre es nicht sinnvoller hier margin-left:200px, also 3px weniger als bei standardkonformen Browsern zu setzen?
Natürlich margin-left von #main.
viele Grüße
Axel
Hi Axel,
Ja, was hat auch margin-right mit dem Problem zu tun? Wäre es nicht sinnvoller hier margin-left:200px, also 3px weniger als bei standardkonformen Browsern zu setzen?
Natürlich margin-left von #main.
*Patsch* Wald, Bäume und so weiter... Du weißt schon. :-)
Danke, darüber läßt sich das ganze Problem natürlich lösen. Mit margin-right hatte ich ursprünglich versucht den 3-Pixel Rand des floatenden Element zu eliminieren, aber das funktioniert nicht, wenn das rechts davon liegende Element einen margin-left bekommt. Falls sich das Ganze irgendwie auch ohne Hacks lösen läßt, bin ich weiterhin für jeden Tip dankbar. Aber so kann ich erstmal damit leben.
Viele Grüße
Cap
Hi,
Falls sich das Ganze irgendwie auch ohne Hacks lösen läßt, bin ich weiterhin für jeden Tip dankbar.
Spricht denn etwas dagegen, #main auch floaten zu lassen?
freundliche Grüße
Ingo