nicht angemeldet
Hallo liebe Forumer!
Es geht um eine Seite deren Layout von einem Grafiker vorgegeben ist.
Drauf ist ein Tabelle, die zum linken Bildschirmrand 59px Abstand halten soll und deren Spalten eine fixe Breite haben müssen. Rechts dieser Tabelle ist eine Liste (ul).
Also sag ich mal zur Tabelle "float:left". Damit der "double margin-bug" des IE nicht zuschlägt sage ich zur Tabelle zusätzlich "display:inline". Und damit berücksichtigt Opera 7.21 die Vorgaben für die Spaltenbreiten nimmer :-( Mozilla und IE würden es meinen Vorstellungen entsprechend machen.
Eine mögliche Lösung wäre es dem body ein entsprechendes Padding anzutun, aber das gilt nur für die unten dargestellte Testdatei, nicht auf der echten Seite :-(
Die 3 Bilder der untenstehenden Testdatei dienen nur zur Kontrolle ob die Spaltenbreiten eingehalten werden oder nicht.
Ich hoffe es gibt eine Lösung?
Beste Grüße
Viennamade
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
<!--
div {margin-left:59px;}
img {float:left;border-bottom:1px green solid;border-top:1px green solid;border-left:1px green solid;}
img.lastcol {border-right:1px green solid;}
table {display:inline;float:left;margin-left:59px;border-collapse:collapse; table-layout:fixed;}
td {border:1px gray solid;}
col {width:162px;}
ul {margin-left:540px;list-style-position:outside;list-style-type:none;}
-->
</style>
<title></title>
</head>
<body>
<div>
<img src="http://www.w3.org/QA/images/qa" alt="/" />
<img src="http://www.w3.org/QA/images/qa" alt="/" />
<img class="lastcol" src="http://www.w3.org/QA/images/qa" alt="/" />
</div>
<div style="clear:both"> </div>
<table>
<colgroup><col /><col /><col /></colgroup>
<tr><td>spalte 1</td><td>spalte 2</td><td>spalte 3</td></tr>
<tr><td>spalte 1</td><td>spalte 2</td><td>spalte 3</td></tr>
<tr><td>spalte 1</td><td>spalte 2</td><td>spalte 3</td></tr>
</table>
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</body>
</html>