FireFox Margin-top geht nicht

ScriptChaos · 04.03.2011, 14:29

Hey,

hab 2 DIVs die Untereinander liegen aber nun ist es so, dass ich möchte, dass der Untere etwas weiter nach oben rutscht. Dazu konnte ich im IE - Google Chrome den Befehl Margin-Top:-20px; nutzen. Anscheinend interpretiert nur der FireFox das anders (anscheinend auch richtig wie ich gelesen habe). Aber wie könnte ich eine vergleichbare Lösung erzielen?

DIVs Oben (2 nebeneinander):

Code:

#left{
	height:400px;
	width:800px;
	background-color:#FFF;
	float:left;
	border-right:thin #000 dashed;
	
	
}
#right{
	height:400px;
	width:301px;
	background-color:#FFF;
	margin-left:800px;
	
}

UNTEN (nur einer aber in der breite von den beiden darüber)

Code:

#down{
	clear:both;
        margin-top:-20px;
	width:1101;	
}

gibt es einen Befehl, welcher das gleiche im FireFox wie Margin-Top:-20px; im IE und im google Chrome macht?

BlackScorp · 04.03.2011, 14:46

der fehler liegt irgendwo anders, da margin-top:-20px in jdem browser läuft

ScriptChaos · 04.03.2011, 14:55

Ahhh Danke, der Clear Befehl war wohl dran Schuld. Nun gehts aber immernoch nicht im FireFox überall sonst gehts nur da nicht -.-

fab · 04.03.2011, 14:57

Doch, das ist schon richtig, in Verbindung mit clear verhält sich margin-top unterschiedlich.

mögliche Abhilfe

ScriptChaos · 04.03.2011, 14:59

Hab jetzt anstelle von margin-top beim unteren DIV margin-bottom bei den beiden Oberen gemacht und so klappts auch mitm Nachbarn

eagle275 · 04.03.2011, 15:01

hast du firebug Plug-in installiert ? dann schau dir mal ganz genau die ausgerechneten CSS an (das sind dann die, die der Browser berechnet aufgrund deiner festgelegten Stylevorschriften) .. meist findet man dort dann den Schuldigen.

Aber wenn ich ehrlich bin, überrascht es mich, das ausgerechnet FF spinnen soll - ich würd eher erwarten, dass der IE Sorgen macht, weil der bei bestimmten Cascadierungen nicht hinterherkommt.

ChrisB · 04.03.2011, 15:05

Zitat:

Zitat von eagle275

Aber wenn ich ehrlich bin, überrascht es mich, das ausgerechnet FF spinnen soll

Niemand hat von „spinnen“ geredet.

cycap · 04.03.2011, 15:22

Ich seh hier nur "anders" und "geht nicht"... was passiert denn überhaupt?

Manko10 · 04.03.2011, 15:28

clear und margin-top zusammen ist immer schwierig, da das floatende Element aus dem Dokumentenfluss genommen wird und die Spezifikation hier nicht keine genauen Regelungen liefert. Aber fab hat die Lösung doch schon genannt, warum nutzt du die nicht?

ChrisB · 04.03.2011, 15:37

Zitat:

Zitat von Manko10

clear und margin-top zusammen ist immer schwierig, da das floatende Element aus dem Dokumentenfluss genommen wird und die Spezifikation hier nicht keine genauen Regelungen liefert.

Doch, tut sie: http://www.w3.org/TR/CSS21/box.html#collapsing-margins

Um mit negativem vertikalem Margin ein Element näher an ein anderes zu bringen oder gar Überlappung zu erzielen, braucht es Punkt 1, collapsing von adjoining margins.
Punkt 2 schließt dieses Verhalten für eine floated box, und die liegt mit #left hier ja vor, aber aus. (Man sieht es im Beispiel sehr schön, wenn man #left eine geringere Höhe gibt, dann wirkt ein negatives margin-top für #down in Bezug auf #right sehr wohl.)

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Firefox dreht durch	coola	Off-Topic Diskussionen	3	05.02.2011 16:43
[Erledigt] IE zeigt die Seite nicht richtig an	Nikon	HTML, Usability und Barrierefreiheit	4	28.01.2011 23:05
Firefox Bug	hman13	Off-Topic Diskussionen	51	23.11.2010 18:19
wieso öffnet firefox 3 "download link" wie FTP-Server ?	Mr.PC1982	HTML, Usability und Barrierefreiheit	5	13.10.2010 08:13
Googlemaps und IE8	leder	JavaScript, Ajax und mehr	0	17.03.2010 15:18
CSS problem	gandalf	HTML, Usability und Barrierefreiheit	6	03.09.2008 23:46
Firefox / IE - ungeahnte Statistik	pepe24	Off-Topic Diskussionen	10	30.04.2007 16:46
Firefox will mein 3-spaltiges Layout mit Footer nicht (CSS)!	vampsoftchef	HTML, Usability und Barrierefreiheit	1	28.02.2007 00:22
templates oder css mit firefox	rbs_phoenix	HTML, Usability und Barrierefreiheit	1	30.10.2006 15:24
[Erledigt] window.location.href mit firefox		HTML, Usability und Barrierefreiheit	15	18.11.2005 17:49
Wordpress Template		HTML, Usability und Barrierefreiheit	8	22.08.2005 11:21
[Erledigt] shiftKey bei Firefox abfragen		HTML, Usability und Barrierefreiheit	2	05.08.2005 15:08
[Erledigt] verfluchter Firefox		HTML, Usability und Barrierefreiheit	5	08.07.2005 22:51
[Erledigt] Design Firefox vs IE bitte um Hilfe		HTML, Usability und Barrierefreiheit	4	23.09.2004 05:15

04.03.2011, 14:29
ScriptChaos Benutzer Registriert seit: 29.07.2010 Beiträge: 40 PHP-Kenntnisse: Anfänger	FireFox Margin-top geht nicht Hey, hab 2 DIVs die Untereinander liegen aber nun ist es so, dass ich möchte, dass der Untere etwas weiter nach oben rutscht. Dazu konnte ich im IE - Google Chrome den Befehl Margin-Top:-20px; nutzen. Anscheinend interpretiert nur der FireFox das anders (anscheinend auch richtig wie ich gelesen habe). Aber wie könnte ich eine vergleichbare Lösung erzielen? DIVs Oben (2 nebeneinander): Code: #left{ height:400px; width:800px; background-color:#FFF; float:left; border-right:thin #000 dashed; } #right{ height:400px; width:301px; background-color:#FFF; margin-left:800px; } UNTEN (nur einer aber in der breite von den beiden darüber) Code: #down{ clear:both; margin-top:-20px; width:1101; } gibt es einen Befehl, welcher das gleiche im FireFox wie Margin-Top:-20px; im IE und im google Chrome macht? Geändert von ScriptChaos (04.03.2011 um 14:35 Uhr).


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

04.03.2011, 14:46
BlackScorp Erfahrener Benutzer Registriert seit: 25.09.2009 Beiträge: 2.114 PHP-Kenntnisse: Fortgeschritten	der fehler liegt irgendwo anders, da margin-top:-20px in jdem browser läuft __________________ Mein kleines Projekt -Cruel Online- 5 von 3 Leuten können kein Bruchrechnen

04.03.2011, 14:55
ScriptChaos Benutzer Registriert seit: 29.07.2010 Beiträge: 40 PHP-Kenntnisse: Anfänger	Ahhh Danke, der Clear Befehl war wohl dran Schuld. Nun gehts aber immernoch nicht im FireFox überall sonst gehts nur da nicht -.-

04.03.2011, 14:57
fab Erfahrener Benutzer Registriert seit: 28.07.2010 Beiträge: 2.308 PHP-Kenntnisse: Fortgeschritten	Doch, das ist schon richtig, in Verbindung mit clear verhält sich margin-top unterschiedlich. mögliche Abhilfe __________________ PHP Blog + Library CSS Effects + Tools

04.03.2011, 14:59
ScriptChaos Benutzer Registriert seit: 29.07.2010 Beiträge: 40 PHP-Kenntnisse: Anfänger	Hab jetzt anstelle von margin-top beim unteren DIV margin-bottom bei den beiden Oberen gemacht und so klappts auch mitm Nachbarn

04.03.2011, 15:01
eagle275 Erfahrener Benutzer Registriert seit: 01.09.2010 Beiträge: 4.561 PHP-Kenntnisse: Fortgeschritten	hast du firebug Plug-in installiert ? dann schau dir mal ganz genau die ausgerechneten CSS an (das sind dann die, die der Browser berechnet aufgrund deiner festgelegten Stylevorschriften) .. meist findet man dort dann den Schuldigen. Aber wenn ich ehrlich bin, überrascht es mich, das ausgerechnet FF spinnen soll - ich würd eher erwarten, dass der IE Sorgen macht, weil der bei bestimmten Cascadierungen nicht hinterherkommt. __________________ "Irren ist männlich", sprach der Igel und stieg von der Drahtbürste

04.03.2011, 15:22
cycap Moderator Registriert seit: 13.02.2008 Beiträge: 6.816 PHP-Kenntnisse: Fortgeschritten	Ich seh hier nur "anders" und "geht nicht"... was passiert denn überhaupt?

04.03.2011, 15:28
Manko10 Supermoderator HD Registriert seit: 16.03.2008 Beiträge: 8.706 PHP-Kenntnisse: Fortgeschritten	clear und margin-top zusammen ist immer schwierig, da das floatende Element aus dem Dokumentenfluss genommen wird und die Spezifikation hier nicht keine genauen Regelungen liefert. Aber fab hat die Lösung doch schon genannt, warum nutzt du die nicht? __________________ Refining Linux Advent Calendar series “24 Outstanding ZSH Gems”