CSS - Darstellungsproblem

Tex

Hallo,

ich habe eine Seite mit CSS designed und eine Box, welche den Inhalt der Seite darstellt. Also den jeweiligen Text. Wenn der Text aber zu lang ist, gibt es ein Darstellungsproblem (siehe Grafik), in der Weise, dass der Text einfach an das Ende der Box angehängt wird.

Hier der Inhalt der CSS-Datei:

Code

body {
	margin-top:10px;
	margin-bottom:10px;
	margin-left:0px;
	margin-right:0px;
	background-color:#666666;
	text-align:center;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
}


.top {
	width:750px;
	height:100px;
	margin:0px auto;
	padding:10px;
	background-color:#999999;
	text-align:left;
	border-top:1px solid #000000;
	border-left:1px solid #000000;
	border-right:1px solid #000000;
	border-bottom:2px solid #FFCC00;
}


.top-logo {
	float:left
}


.top-banner {
	text-align:right;
}


.mittel {
	width:750px;
	height:800px;
	margin:0px auto;
	padding:10px;
	text-align:left;
	background-color:#EAEAEA;
	border-left:1px solid #000000;
	border-right:1px solid #000000;
	border-bottom:2px solid #FFCC00;
}


.unten {
	width:750px;
	height:10px;
	margin:0px auto;
	padding:10px;
	text-align:center;
	background-color:#999999;
	border-left:1px solid #000000;
	border-right:1px solid #000000;
	border-bottom:1px solid #000000;
}


.links {
	width:166px;
	border:1px solid #808080;
	background-color:#C0C0C0;
	float:left;
}


.rechts {
	width:140px;
	height:798px;
	border:1px solid #808080;
	-moz-border-radius-topleft:8px;
	background-color:#C0C0C0;
	float:right;
}


.rechts-news {
	height:145px;
	padding-left:5px;
	padding-top:3px;
	border-bottom:1px solid #808080;
}


.rechts-banner {
	padding-top:10px;
	text-align:center;
	height:639px;
}


.inhalt {
	width:410px;
	height:790px;
	float:left;
	margin-left:10px;
	padding-left:5px;
	padding-right:3px;
	padding-bottom:5px;
	padding-top:3px;
	border:1px solid #CCCCCC;
	-moz-border-radius-topleft:8px;
	background-color:#FFFFFF;
}


a.menuepunkt {
	color:#333399;
	background-color:#C0C0C0;
	text-align:left;
	display:block;
	width:160px;
	text-decoration:none;
	padding-left:5px;
	padding:3px;
}


a.menuepunkt:hover {
	color:#FFFFFF;
	background-color:gray;
	text-decoration:none;
}

Alles anzeigen

Relevant ist hier der Teil .inhalt.

Ich wäre super dankbar, wenn mir hier jemand weiterhelfen könnte.

Beste Grüße,
Tex

Tex

Habe das Problem mit dem Befehl "overflow" gelöst. Eine bessere Lösung gibt es nicht, oder?

Marcus

Hi,

Eine andere Lösung kenne ich auch nicht, aber vieleicht solltest du dir überlegen, ob du die Element nicht absolut positionierst, denn das Box-Modell des IE unterscheidet sich von anderen Browsern.
Beim IE wird der Margin nicht zur Größe der Box gezählt, wärend andere Browser (W3C-Konform) das tun, das kann zu Unterschieden in der Darstllung führen.

Gruß
Marcus

Die Unterschiede habe ich wegbekommen. Aber jetzt weiß ich zumindest, weshalb diese autreten

Danke Dir!

Tags