|
|||
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> |
Sponsored Links |
|
|||
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> |
Sponsored Links |
|
|||
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 |
|
|||
Zitat:
Zitat:
__________________
</ulle> |
|
|||
Zitat:
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 |
|
|||
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> |
|
|||
Ups, irgendwie habe ich gerade den ersten Teil deines Posts übersehen.
Zitat:
Zitat:
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> Deine Lösung war richtig - man muss (wie ich schrieb) absolute statt relative Positionierung benutzen. Robin |
|
|||
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 --- |
|
|||
Zitat:
@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> |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ä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 |