zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden IE Bug mit position:relative und float

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 28.07.2005, 16:13
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 06.01.2005
Beiträge: 151
derdiedas befindet sich auf einem aufstrebenden Ast
Standard 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>
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 28.07.2005, 16:28
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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

#box{ 
position:absolute; 
top:27px; 
left: -27px; 
width:727px; 
background:#fee; 
}
__________________
</ulle>
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 28.07.2005, 16:31
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.838
RoToRa wird schon bald berühmt werden
Standard

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
Mit Zitat antworten
  #4 (permalink)  
Alt 28.07.2005, 16:33
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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?
__________________
</ulle>
Mit Zitat antworten
  #5 (permalink)  
Alt 28.07.2005, 16:43
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.838
RoToRa wird schon bald berühmt werden
Standard

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
Mit Zitat antworten
  #6 (permalink)  
Alt 28.07.2005, 16:47
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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.
__________________
</ulle>
Mit Zitat antworten
  #7 (permalink)  
Alt 28.07.2005, 16:59
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 25.03.2004
Beiträge: 1.838
RoToRa wird schon bald berühmt werden
Standard

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
Mit Zitat antworten
  #8 (permalink)  
Alt 28.07.2005, 20:52
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 06.01.2005
Beiträge: 151
derdiedas befindet sich auf einem aufstrebenden Ast
Standard

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 ---
Mit Zitat antworten
  #9 (permalink)  
Alt 28.07.2005, 22:54
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

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.
__________________
</ulle>
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 29.07.2005, 09:56
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 06.01.2005
Beiträge: 151
derdiedas befindet sich auf einem aufstrebenden Ast
Standard

kommt zeit, kommt... ulle, danke für die griffige erklärung
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Verschiebungen bei größerem Bildschirm seelefant CSS 4 28.07.2014 16:43
CSS von Plugin beisst! expand CSS 0 28.09.2012 18:44
joomla template wrock CSS 2 06.04.2012 20:24
CSS - CMS - lange Menus Balken/BG oben? shinobi CSS 3 13.10.2011 22:12
Wordpress: Content im Quelltext VOR allem anderen, aber wie? Bichareh CSS 4 13.06.2009 17:15


Alle Zeitangaben in WEZ +2. Es ist jetzt 22:29 Uhr.