Hi,
Ich habe mir ein 3-Spalten-Layout gebastelt. In der mittleren Spalte gibt es eine Tabelle, die 100% Breite hat. Im FF ist das kein Problem. Doch der IE zickt mal wieder rum. Er denkt nun, dass er die Breite vom Browserfenster nehmen soll und nicht die, die er in dem Div zur Verfügung hat.
Das Layout sieht vereinfacht so aus.
Und hier noch ein Link, damit man sich von dem ganzen mal ein Bild machen kann: http://fadz.uttx.net/minis/phpbb2/index.php
Ich hoffe, dass ihr mir sagen könnt, warum der IE das so macht und ob man das beheben kann, außer das ganze auf Tabellen umstellen zu müssen.
Ich habe mir ein 3-Spalten-Layout gebastelt. In der mittleren Spalte gibt es eine Tabelle, die 100% Breite hat. Im FF ist das kein Problem. Doch der IE zickt mal wieder rum. Er denkt nun, dass er die Breite vom Browserfenster nehmen soll und nicht die, die er in dem Div zur Verfügung hat.
Das Layout sieht vereinfacht so aus.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">
<!--
html, body {
margin: 0;
padding: 0;
height: 100%;
font-family: Arial, Helvetica, sans-serif, "Times New Roman";
color: #000077;
}
div.wrapper {
width: 100%;
min-height: 100%;
margin: 0 auto;
background: url(Bilder/left.gif) repeat-y;
min-width: 790px;
background-color: #E6E6FF;
}
* html div.wrapper { /* Für IE */
height: 100%;
}
div.header {
width: 100%;
height: 148px;
background-image:url(Bilder/header.jpg);
background-position:right;
background-repeat:no-repeat;
background-color: #ddddff;
}
div.leftCol {
width: 180px;
float: left;
padding: 0;
background-color: #ddddff;
}
div.rightCol {
width: 150px;
float: right;
padding: 10px 10px 0 0;
font-size: 10pt;
}
div.centerCol {
margin: 10px 170px 21px 190px;
position:relative
}
div.clear {
clear: both;
margin: 0;
padding: 0;
height: 0;
line-height: 0em;
font-size: 0;
}
div.footer {
width: 100%;
margin: -18px auto 0 auto;
padding: 1px 0 0 0;
height: 17px;
background: #ddddff;
text-align: center;
font-size: 9pt;
color: #000077;
}
-->
</style>
<div class="wrapper">
<div class="header">
header
</div>
<div class="leftCol">
leftCol
</div>
<div class="rightCol">
rightCol
</div>
<div class="centerCol">
<table width="100%">
<tr>
<td>Ein Inhalt</td>
</tr>
</table>
</div>
<div class="clear"> </div>
</div>
<div class="footer">footer</div>
</body>
</html>
Ich hoffe, dass ihr mir sagen könnt, warum der IE das so macht und ob man das beheben kann, außer das ganze auf Tabellen umstellen zu müssen.