nicht angemeldet
IE sprengt den Rahmen des Divs mit Tabelle
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
-
Hallo Andi,
von box-bug und rendermodus hast du vielleicht schonmal etwas gehört?
Vielleicht reicht dir ja der IE 6, sonst wirds etwas aufwändiger.
Probier mal zum Test u. Info mit dem IE 6 sowas:
<body onload="alert(document.compatMode)">
und dann mal den Rest so ändern:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">Grüsse
Cyx23
-
Hallo Cyx23,
von box-bug und rendermodus hast du vielleicht schonmal etwas gehört?
Nein werde jetzt aber googlen
Vielleicht reicht dir ja der IE 6, sonst wirds etwas aufwändiger.
Nein im IE 6 besteht das gleiche Problem
Probier mal zum Test u. Info mit dem IE 6 sowas:
<body onload="alert(document.compatMode)">
Hier kommt BackCompat?
und dann mal den Rest so ändern:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">Das zerhaut mir das Design meiner Seite :(
Gruß
Andi-
Hallo Andi,
Das zerhaut mir das Design meiner Seite :(
...und es würde bei den iE 5.5 und 5 wahrscheinlich wieder anders aussehen.
Du kannst den box-bug auch mit zusätzlichen Containern umgehen, hast du ja
vmtl. auch schon per google gefunden.Oder, ebenfalls mit gleichem, also deinem bisherigen, doctype versuchen für
die IE 5, 5.5, 6 gemeinsam das CSS zu ändern.Es gibt verschiedene Möglichkeiten, den IEs andere Stylenagaben zukommen
zu lassen, abei solltest du berücksichtigen dass der IE 7 bald erscheinen
dürfte, conditional comments wie hier bei conditional comment testcode
(etwas über die Hälfte runterscrollen) können eine praktikable Lösung sein.Grüsse
Cyx23
-
Hallo,
ich kann hier aber die verschiedenen hacks nicht anwenden, da ich der Tabelle im inneren Bereich width=100% geben muss. Ich kann zwar noch ein div herumlegen, welches dann width=100% hat.
Das Probelm ist dann, dass die Tabelle nicht die ganze breite ausfüllt.
Gruß
Andi
-
-
-