• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

margin-top -> Seltsames Verhalten

Status
Für weitere Antworten geschlossen.
S

Seikilos

Neues Mitglied
Hier ist ein Stück Code, was mir im Firefox (für mich) verwirrende Ergebnisse produziert:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
.t{
  	
	width: 175px;
	height: 36px;
	background:  #00ff00;
  }
  
  .t span{ 
   background: #ff0000;
	display: block; 
	height: 18px;
	margin: 150px 0 0 30px;
 }
</style>
</head>
<body>
		<div class="t"><span>Text</span></div>
</body>
</html>

Ich dachte das Span innerhalb des Divs stretcht das Div mit der Klasse t durch die 150px margin-top, aber das tut es bei mir nicht, bei mir rutscht der Parent, also das Div mit runter ...

Könnte mir jemand das Verhalten erklären?

Danke
 
Moin.

Warum machst Du aus dem <span> ein Block-Element? Das ergibt keinen Sinn.

Und der Doctype ist in sofern gefährlich, als dass er Mozillas nur in den Almost Standards Mode versetzt.

Gruß,
-Efchen
 
Hallo,

ich wollte eigentlich bei allen Browsern den Quirks Mode mit dem Doctype vermeiden.

Das Span wird ein Block, weil ich es Gestaltungstechnisch brauche, ich muss etwas von der linken Seite rücken und eben von der oberen, aber dies gibt mir seltsame Ergebnisse
 
In den Quirks Modus versetzt Du damit auch nur den Safari 0.92 und die IE 3-5 (die sind eh immer im Quirks Mode).
Siehe LANtastic’s Artikel » DTD - Document Type Declaration - Das richtige Doctype

Das mit dem span verstehe ich nach wie vor nicht. Was ist denn ein span, das Du zum Block-Element machst? Doch ein div!

Und irgendwie verstehe ich die Mathematik dahinter nicht. Das span kriegt ne Höhe von 168px, das Elternelement eine Höhe von 36px. Wie verträgt sich das rein rechnerisch? Ich vermute, den gewünschten Effekt würdest Du erzielen, wenn das Eltern-div keine feste Größe hätte.

Gruß,
-Efchen
 
Das dass span ein div ist, ist hier nur eine Designwahl, per Default soll es ein span sein, also ge-inlined werden.
Danke für den Doctype link, ich werde ihn mir genau angucken.

Zu dem Problem, hast du es mal in html angeguckt? Was ich von Firefox erwartet hätte, passiert eigentlich nur, wenn ich der klasse t noch ein padding: 1px gebe, dann rutscht das innere span unten aus dem Div raus, ohne diese padding zieht aber das Span den Parent mit.

Siehe Bild, links so wie es ist und rechts so wie ich es mir vorgestellt habe, auch wenn der innere span den parent nicht dehn, sollte doch immerhin der parent nicht nach unten versetzt werden, oder?
 

Anhänge

  • padding.jpg
    padding.jpg
    25,4 KB · Aufrufe: 5
Seikilos schrieb:
Zu dem Problem, hast du es mal in html angeguckt?
Zum Vergrößern anklicken....
Nö, ist ja kein Link da, nur Code. Ist mir zu aufwändig :-)

Was ich von Firefox erwartet hätte, passiert eigentlich nur, wenn ich der klasse t noch ein padding: 1px gebe, dann rutscht das innere span unten aus dem Div raus, ohne diese padding zieht aber das Span den Parent mit.
Zum Vergrößern anklicken....
Das hätte ich in keinem Fall erwartet, weil span doch ein Kindelement des div.t ist, und ich nicht wüsste, warum das Kind ohne position/float außerhalb seines Elternelements liegen soll.
Wir drängt sich der Verdacht auf, dass Du irgendwas falsch konzipiert hast.

Hast Du "Firebug", das Plugin für Firefox? Wenn nicht, installier Dir das mal, damit kann man solche Sachen schön untersuchen und sich direkt beim Überfahren der Elemente einer Seite mit der Maus im unteren Fensterteil den HTML-/CSS-Code dazu anzeigen lassen. Vielleicht hilft das weiter.

Nachtrag: Tut mir leid, aber bei mir hapert es am Verständnis für Dein Ziel. Ich weiß nicht, warum ein Element, das innerhalb eines anderen Elements steht, unterhalb des Elements angezeigt werden soll. Und das ohne position/float. Ich finde, da ist irgendwo ein Denkfehler in Deinem Layout.
 
Zuletzt bearbeitet von einem Moderator:
Welcher doctype bezietet sich denn an? Gemäß deinem Link dann wohl
der hier?
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN">

Also Xhtml 1.1 ohne URI? Das scheint in der Liste von deinem Link die meisten Browser in den Full Standard mode zu versetzen.



Zum Verständnis: Ich versuche in HTML das angehängte Bild umzusetzen, wobei mein Ziel ist, möglichst wenige Verschachtelungen zu erreiche. Die Umsetzung macht es nunmal notwendig, dass ein inneres objekt vertikal im Parent zentriert werden muss und dass die BG Farbe des inneren Objekts und die BG Grafik des Parents zu sehen ist
 

Anhänge

  • div.jpg
    div.jpg
    6 KB · Aufrufe: 9
Ich würde XHTML 1.0 Strict empfehlen.
XHTML 1.1 basiert eigentlich auf XML, daher muss eigentlich der xml-Prolog davor, das führt aber im supertollen Browser einer nicht näher genannten Firma leider zum Quirks Mode.
 
Hmmm...stimmt...da hinten hab ich noch gar nicht so oft hingesehen :-)
Ich denke aber, dass eigentlich nur der IE im Quirks Mode richtig schreckliche Sachen macht. Die modernen Browser werden im Quirks Mode nicht besonders schlimm sein. Mozilla hat z.B. im Quirks Mode meines Wissens trotzdem das richtige Box Model.

Gute Nacht,
-Efchen
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben