✔ div wird trotz Breitenangabe >manchmal< zu breit - warum?

[Kryptaesthesie]

Hallo.

Habe mir ein neues schlichtes Design erstellt, aber es hakt noch an einer kleinen Stelle.
Leider nicht immer, aber ich habe das Problem mal mit dem IE festgehalten - siehe Anhang.

Es handelt sich um die Seite www.kuwl.de und das Problem tritt auf, wenn in der Shoutbox ein Kommentar abgegeben wurde - siehe Bsp.-Link.

Evtl. wichtige Ausschnitte aus dem Quelltext:

		<style type="text/css" media="screen"><!--
			#contentbackground { background-image: url(img/face/content_background.gif); min-height: 100%; height: 100%; width: 600px;  left: 80px; top: 0; position: absolute; visibility: visible; }
			#navi { height: 60px; width: 600px; left: 80px; top: 30px; position: absolute; visibility: visible; }
			#content { height: auto; width: 600px; left: 80px; top: 110px; position: absolute; visibility: visible; background-image: url(img/face/content_background.gif); }			
			body>#content { height:auto; }
			#sb { height: auto; width: 192px; left: 700px; top: 170px; position: absolute; visibility: visible; border: 2px; }
			body>#sb { height:auto; width: 192px; }
			
			#shoutbox { background-image: url(img/shoutbox/SB_02.gif); height: auto; width: 192px; left: 0; top: 0; position: absolute; visibility: visible; }
			#shoutboxeintraege { height: auto; width: 139px; left: 38px; top: 74px; position: absolute; visibility: visible; }
			#shoutboxneuereintrag { width: 139px; left: 38px; top: inherit; position: relative; height: 150px; visibility: visible; }
			#shoutboxallezeigen { height: 93px; width: 192px; left: 0; top: inherit; position: relative; visibility: visible; }
			#smallextras { height: 130px; width: 192px; left: 700px; top: 30px; position: absolute; visibility: visible; }
			body>#smallextras { height: 130px; width: 192px; }
			#theextras { background-image: url(img/extras_bg.gif); height: 130px; width: 192px; left: 0; top: 0; position: absolute; visibility: visible; }
			body>#theextras { height: 130px; width: 192px; }

		--></style>

Oder die CSS-Datei:

html {	height:100%;
		margin:0;
		padding:0; }

body {	background-image: url(img/background.gif);
		margin: 0;
		padding: 0;
		height: 100%;
 		font-size: 12px; 
 		font-family: Arial, "Comic Sans MS";
 		color: #000000; }
 	
a:link { 	color: #000000; text-decoration: none; }
a:visited { color: #000000; text-decoration: none; }
a:hover { 	color: #000000; text-decoration: none; }
a:active { 	color: #000000; text-decoration: none; }

table { text-align: left; }

div.shoutbox { font-size: 11px; }
div.shoutboxid { font-size: 9px; }

div.code { 	font-size: 12px;
			font-family: Times, Arial;
			color: #000000;
			border: dotted;
			border-color: Maroon; }

div.codeNoBorder { 	font-size: 12px;
					font-family: Times, Arial;
					color: #000000; }
			
div.suchergebnis { 	font-size: 12px;
			font-family: Times, Arial;
			color: #000000; }
			
div.adminoverview {  font-size: 12px;
			         font-family: "Comic Sans MS", Times, Arial;
			         color: #000000; }
			
div.shoutboxshowall 
		{ 	font-size: 13px;
			color: #000000; }

Ich hoffe, ihr habt einen Rat für mich, wie es zu dem Problem bei der Shoutbox kommt.
Evt. liegt es am Doctype

Danke schon mal im Voraus.
MfG Gerrit

 

[Maik]

Vielleicht hilft es, wenn Du die Tabellenbreiten mit dem entsprechenden Pixelwert bestimmst?

<table width="100%" border="0" cellspacing="0" cellpadding="0">
				<tr>
					<td width="28"></td>
					<td>
<div class="shoutbox"><table width="100%" border="0" cellspacing="0" cellpadding="10">

 

[Kryptaesthesie]

ich habe das angepasst und es scheint geholfen zu haben.
Hätte ich auch selber drauf kommen können


Danke!
MfG Gerrit