nicht angemeldet
Tabelle mit float:left
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>
-
Hi,
Damit der "double margin-bug" des IE nicht zuschlägt sage ich zur Tabelle zusätzlich "display:inline".
mache dies mittels eines Hacks, z.B. des Star-HTML-Hacks.
Cheatah
--
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Hallo Cheatah!
Damit der "double margin-bug" des IE nicht zuschlägt sage ich zur Tabelle zusätzlich "display:inline".
mache dies mittels eines Hacks, z.B. des Star-HTML-Hacks.
Ich wollte mich - bevor der Thread verschwindet - noch bedanken ... hatte gehofft, daß noch was Besseres kommt. Gibt es aber scheinbar nichts.
Beste Grüße
Viennamade
-