Andi: IE sprengt den Rahmen des Divs mit Tabelle

Beitrag lesen

Hallo,

zuerst beschreibe ich das Problem. Ich habe ein Layout mit Divs erstellt. In diesen Divs habe ich eine Tabelle mit width=100%.

Diese soll aber nicht direkt am Div anliegen sondern einen kleinen Rand haben. Wenn ich nun diesen Rand einfüge sprengt mir der IE den Rahmen der außeren Tabelle und geht einfach drüber. Im Firefox und Opera alles wird es richtig dargestellt.

So damit ihr euch diese "komische" Verhalten erklärt habe hier ein Beispiel, wo das Problem auftritt:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="screen">
div.list {
width:100%;
margin-bottom:10px;
font-size:11px;
font-weight:bold;
font-family:Arial,Helvetica,sans-serif;
border:2px solid #A1CBD9;
background-image:url(../portal/styles/images/../portal/styles/images/keres_pattern.gif)
}
div.list div.header {
padding:6px;
color:#036;
background-color:#A1CBD9
}
div.list#clear {clear:both}
ul.floatList {padding:0;margin:0;list-style-type:none}
ul.floatList {overflow:hidden;_height:1%}
ul.floatList .left {float:left}
ul.floatList .right {float:right}
.packages-margin {padding:6px}

</style>
</head>

<body>
<table style='border:1px solid red;'><tr><td style='border:1px solid red;' width='200px'>spalte</td>
<td style='border:1px solid red;' width='700px'>
<div class='list'>
<div class='header'>
<ul class='floatList'>
<li class='left'><strong>Titel</strong></li>
<li class='right'><a href='#' onClick='return false;'>Buchen</a></li>
</ul>

</div>
<div class='packages-margin'>
<table width='100%'><tr><td>test</td></tr></table>
</div>
</div>
</td>
<td width='200px' style='border:1px solid red;'>spalte</td></tr></table>

</body>
</html>

Ich hoffe jemand kann mir helfen.

Gruß
Andi