✔ wieder ein Boxmodellproblem: div an inhalt anpassen

Status
Nicht offen für weitere Antworten.
M

Marcel G

Mitglied
hallo zusammen,
ich komm jetzt nicht mehr weiter.
Ich versuch grad ein div zu erstellen, in dem 2 weitere divs sind. In dem einem soll text stehen, in dem anderen soll ein Hintergrundbild sein, dass sich dem Text-Layer anpasst. Ich hab da mal etwas rumgespielt, dedr FF zeigt es mir auch richtig an, nur der IE nicht. Weiß jemand was ich anderst machen kann oder falsch gemacht hab
HTML: 
<html>
<body>
<div style="border: 5px solid blue; position: absolute;">
	<div style="border: 5px solid yellow;">
		<div style="">
			hallo<br><br>
		</div>
		<div style="">
			text
		</div>
	</div>
	<div style="position: absolute; width:100%; height: 100%; border: 5px solid red;">
		<table style="width:100%; height: 100%;">
			<tr><td style="width: 18px;"></td>
			    <td></td>
			    <td style="width: 28px;"></td></tr>
			<tr><td></td>
			    <td></td>
			    <td></td></tr>
			<tr><td></td>
			    <td></td>
			    <td></td></tr>
		</table>
	</div>
</div>
</body>
</html>

Danke
 
Hi,

der IE zeigt gegenüber Firefox die beiden inhaltsleeren Tabellenzellen mit der Breitenangabe nicht an. Abhilfe schafft da ein erzwungenes Leerzeichen &nbsp;.

Damit in diesem Modell die "blaue" Box auch die "rote" Box umschliesst, darf das Kindelement im Elternelement nicht absolut positioniert werden, was dann die width:100% für die "rote" Box überflüssig macht, und dazu führt, dass sie nicht um die doppelte Rahmendicke breiter dargestellt wird, als die "blaue" Box.
 
danke erst mal für deine Hilfe.

Also ich weiß jetzt zwar nach langem hin und her noch nicht wirklich wie oder warum, aber so funktioniert es jetzt doch mal:
HTML: 
<html>
<body>
<div style="border: 5px solid blue; position: absolute;">
	<div style="position: absolute; width:100%; height: 100%; border: 5px solid red;">
		<table style="width:100%; height: 100%;">
			<tr><td style="width: 18px;">&nbsp;</td>
			    <td>&nbsp;</td>
			    <td style="width: 28px;">&nbsp;</td></tr>
			<tr><td>&nbsp;</td>
			    <td>&nbsp;</td>
			    <td>&nbsp;</td></tr>
			<tr><td>&nbsp;</td>
			    <td>&nbsp;</td>
			    <td>&nbsp;</td></tr>
		</table>
	</div>
	<div style="position: relative; border: 2px solid yellow;">
		<div style="">
			hallo<br><br>
		</div>
		<div style="">
			text
			text da gibts noch mehr text
		</div>
	</div>
</div>
</body>
</html>

Zuerst hat mir der IE immer über die ganze Breite angezeigt, als ich dann den doctype weggelassen hab, hat der IE mir das interessanterweise richtig angezeigt wie ich es wollte und nicht über die gesamte Breite. Vielleicht weiß da jemand auch noch ne Antwort?
 
Zuletzt bearbeitet:
Hi,

wenn das Dokument im Standardsmode übergeben wird, hält sich der IE an das CSS-Boxmodell und addiert die Rahmendeklaration zur Breitenangabe hinzu.

Im Quirksmode hingegen, also ohne Doctype-Angabe, interpretiert er das Boxmodell falsch.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück