XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   IE Bug mit position:relative und float (http://xhtmlforum.de/showthread.php?t=36295)

derdiedas 28.07.2005 15:13

IE Bug mit position:relative und float
 
Hallo,

Bitte das Problem mit IE und vergleichsweise mit Firefox, Opera anschauen

das IE-Resultat zeigt sich wie beim Double Margin Float Bug ->
addiert rechts den Wert hinzu...

- ist aber nicht dieser Bug, da ja anders aufgebaut (position:relative; negatives left und gefloatede child elemente).

Hmm, ich weiss jetzt nicht weiter... kennt jemand einen workaround für den IE hierzu?

grüße

p.s.
der code für #box müsste aber auf die gleiche Weise arbeiten
#box{
position:relative;
left: -27px;
...
}


Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>IE Bug</title>
<style type="text/css">
<!--
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}

#wrap{
width:700px;
margin:0 auto;
height:100%;
background:#000;
}

#box{
position:relative;
top:27px;
left: -27px;
width:727px;
background:#eee;
}

#left{
float:left;
width:500px;
background:#ccc;
}

#right{
float:right;
width:227px;
background:#999;
}
-->
</style></head>
<body>
<div id="wrap">
<div id="box">
<div id="left">left</div>
<div id="right">right</div>
<div style="clear:both;"></div>
</div>
</div>
</body></html>


ulle 28.07.2005 15:28

Code:

#wrap{
position:relative;
width:700px;
margin:0 auto;
height:100%;
background:#000;
}

#box{
position:absolute;
top:27px;
left: -27px;
width:727px;
background:#fee;
}


RoToRa 28.07.2005 15:31

So ganz verstehe ich deine Problembeschreibung nicht. Meinst du die Tatsache, das #box bei FF rechts eingerückt, bei IE aber bundig ist?

Das liegt daran, das #box 727 Pixel breit ist und in #wrap liegt, welches nur 700 Pixel breit ist, also zieht IE #wrap fehlerhafterweise auf.

Mein Vorschlag wäre #box absolute statt relative zu positionieren. IMHO sollte relative Positionierung hier eh nicht verwendet werden.

Robin

ulle 28.07.2005 15:33

Zitat:

Zitat von RoToRa
So ganz verstehe ich deine Problembeschreibung nicht. Meinst du die Tatsache, das #box bei FF rechts eingerückt, bei IE aber bundig ist?

Bei mir ist es im IE rechts eingerückt und im FF aufgezogen. Und ich denke die FF-Ansicht ist gewünscht

Zitat:

Zitat von RoToRa
IMHO sollte relative Positionierung hier eh nicht verwendet werden.

Was meinst Du mit hier?

RoToRa 28.07.2005 15:43

Zitat:

Was meinst Du mit hier?
Ich bin auch nicht ganz sicher, was du genau mit dieser Frage fragen willst, da ich meinen Satz eigentlich ganz verständlich finde. "Hier" = "in diesem Fall".

Ich wollte eigentlich vorsichtig andeuten, das hier eventuell wieder einmal ein Fall von missverstandener relativen Positionierung vorliegt. Andererseits kann man es so machen (wenn man vom IE-Bug absieht), aber es ist aber IMHO falsch bzw. ich würde es so nicht machen.

Robin

ulle 28.07.2005 15:47

Was für ein IE-BUG?

In diesem Fall hat sich der IE richtig verhalten, zumindest bei mir. Und zur Lösung des vermuteten Layout habe ich einen "richtigen" CODE Vorschlag gemacht.

RoToRa 28.07.2005 15:59

Ups, irgendwie habe ich gerade den ersten Teil deines Posts übersehen.

Zitat:

Zitat von ulle
Zitat:

Zitat von RoToRa
So ganz verstehe ich deine Problembeschreibung nicht. Meinst du die Tatsache, das #box bei FF rechts eingerückt, bei IE aber bundig ist?

Bei mir ist es im IE rechts eingerückt und im FF aufgezogen. Und ich denke die FF-Ansicht ist gewünscht

Hier hast du recht, ich hatte es beim Schreiben verwechselt.

Zitat:

Was für ein IE-BUG?

In diesem Fall hat sich der IE richtig verhalten, zumindest bei mir. Und zur Lösung des vermuteten Layout habe ich einen "richtigen" CODE Vorschlag gemacht.
Nein, der FF ist derjenige der es richtig macht. Das ganze hat nichts mit den Floats und nur indirekt mit der relativen Positionierung zu tun. Wenn man sich folgende Variante (ohne Floats und Positionierung) in den Browsern anschaut:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>IE Bug</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}

#wrap{
width:700px;
margin:0 auto;
height:100%;
background:#000;
}

#box{
width:727px;
background:#eee;
}
</style></head>
<body>
<div id="wrap">
<div id="box">
        x
</div>
</div>
</body></html>

Stellt man fest: Im FF ist die graue #box breiter als der schwarze #wrap; im IE sind sie gleich breit. Das liegt daran, dass der #box (der 727px breit ist) im schmäleren #wrap (der 700px breit sein sollte) liegt. Der IE zieht aber #wrap - fehlerhafter Weise - auf die 727px Pixel auf. Das ist der Bug beim IE.

Deine Lösung war richtig - man muss (wie ich schrieb) absolute statt relative Positionierung benutzen.

Robin

derdiedas 28.07.2005 19:52

mit euren ausführungen (code und comments) lässt sich das problem für mich , für IE lösen - jetzt kann ich weiterarbeiten.

danke

ps.
aber mit dem verstehen von position:relative; ist es bei mir noch nicht soweit, wie man sieht, auch jetzt noch nicht... - kommt zeit, kommt ---

ulle 28.07.2005 21:54

Zitat:

Zitat von RoToRa
Stellt man fest: Im FF ist die graue #box breiter als der schwarze #wrap; im IE sind sie gleich breit. Das liegt daran, dass der #box (der 727px breit ist) im schmäleren #wrap (der 700px breit sein sollte) liegt. Der IE zieht aber #wrap - fehlerhafter Weise - auf die 727px Pixel auf. Das ist der Bug beim IE.

@RoToRa - Jepp, recht hast DU, hatte gar nicht gesehen das der IE das Eltern-Element aufgedrückt hatte. Der FF dürfte aber auch das relative verschobene Element nicht auf 727px vergrößern. Da es ja in einem Element mit 700px eingeschlossen ist. D.h. es hing virtuell rechts raus ;)


@derdiedas - relative Positionierung ist sehr einfach!

Es gibt Dir die Möglichkeit ein Element aus dem Dokumenten-Fluss zu verschieben, also von der Position wo es normalerweise stehen würde.
Gibst Du keine neue Position mit top, right, bottom, left vor - so bleibt das Element wo es ist.
Nun kommt die relative Verschiebung mit einer neuen Position, z.B. top: 10px. Jetzt hast Du das Element um 10 Pixel nach unten geschoben. Aber den Platz, den es vor der Verschiebung eingenommen hatte, bleibt im Dokumenten-Fluss belegt.

Anders bei absoluter Positionierung, dabei wird das Element aus dem Dokumenten-Fluss genommen und ist nun frei gestaltbar.

Beachte meine Ausdruckweise !!
relative Verschiebung bzw. absolute Positionierung

Vielleicht wird es Dir nun klar. Und zur absoluten Postionierung gehört unbedingt das Thema "Containing Block", denn das habe ich in Deinem CODE angewand.

Suchfunktion; Es gibt gute THREADs dazu.

derdiedas 29.07.2005 08:56

kommt zeit, kommt... ulle, danke für die griffige erklärung :D


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:59 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2021, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020