margin-top -> Seltsames Verhalten

**Seikilos** · 29.05.2008 08:04

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

**Efchen** · 29.05.2008 08:07

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

**Seikilos** · 29.05.2008 08:10

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

**Efchen** · 29.05.2008 08:19

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

**Seikilos** · 29.05.2008 08:39

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?

**Efchen** · 29.05.2008 08:55

Zitat von Seikilos

Zu dem Problem, hast du es mal in html angeguckt?

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.

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.

**Seikilos** · 29.05.2008 15:56

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

**Efchen** · 29.05.2008 17:06

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.

**Seikilos** · 29.05.2008 17:12

Dafür kann ich allerdings dann Safari vergessen, oder?

**Efchen** · 29.05.2008 17:18

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

Thema: margin-top -> Seltsames Verhalten

LinkBack

Themen-Optionen

margin-top -> Seltsames Verhalten

Aktive Benutzer

Aktive Benutzer

Ähnliche Themen

div container verändert durch img seine größe

Problem mit 3 div-Containern / IE

Style

Hilfe beim CSS

Seltsames Verhalten bei reset Button

Stichworte

Lesezeichen

Lesezeichen

Berechtigungen