nicht angemeldet
ie problem bei tabellenlayout
hallo zusammen,
ich bastel gerade an einem neuen layout für eine fanpage und bin da auf ein kleines problem gestossen. zuerst mal der link:
http://www.mothertonguelives.de/tmp/basteln/relaunch/index_ie.shtml
ich hab zur veranschaulichung der tabelle mal ne borderangabe gemacht, die im normalfall natürlich nicht da ist und ohne die das obere menü auch in einer reihe dargestellt wird.
opera und firefox zeigen die seite so an, wie ich mir das vorgestellt habe, der ie hingegen ignoriert scheinbar die height angabe für das obere menü sowie die width angabe für das linke submenü.
hat jemand eine idee, woran das liegt bzw einen lösungsansatz!? ich könnte dem content-bereich auch ne feste width und height geben, aber das scheint mir nicht so das gelbe vom ei zu sein oder!?
hier mal noch der relevante css + html code:
(kompletten css-code gibts hier: http://www.mothertonguelives.de/tmp/basteln/relaunch/relaunch2.css
---
css:
#topnav {
text-align:center;
vertical-align:middle;
border-top:1px solid #333;
border-bottom:1px solid #333;
padding:0;
margin:0;
height:30px;
font-size:9px;}
#navsub {
width:150px;
margin:0;
padding:25px 0 0 7px;
vertical-align:top;}
#content {
margin:0;
padding:30px 0 0 10px;
vertical-align:top;}
---
html:
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>mtl.de- relaunch 01</title>
<link rel="stylesheet" type="text/css" href="relaunch2.css">
</head>
<body>
<table id="container" cellpadding="0" cellspacing="0" border="1" >
<tr>
<td id="titel" colspan="3"><img src="gfx/orange.gif" width="24" height="6" border="0" alt=""> mothertonguelives.de - offizielle fanpage</td>
</tr>
<tr>
<td colspan="3" id="spacer">
</td>
</tr>
<tr>
<td rowspan="2" id="announce">
<!--#include virtual="announces.shtml" -->
</td>
<td colspan="2" id="topnav">
<!--#include virtual="topnav.shtml" -->
</td>
</tr>
<tr>
<td id="navsub">
<ul id="leftnav">
<li><a href="#">News</a></li>
<li><a href="#">News-Archiv</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</td>
<td id="content">
<h1>News</h1>
</td>
</tr>
<tr>
<td colspan="3" id="footer">© 2002 - 2004 mothertonguelives.de :: powered by cigarettes and alcohol
</td>
</tr>
</table>
</body>
</html>
---
danke schon mal.
gruss,
simme
-
hallo powered by cigarettes and alcohol :))))),
(den Spruch finde ich super!)
ich hab zur veranschaulichung der tabelle mal ne borderangabe gemacht, die im normalfall natürlich nicht da ist und ohne die das obere menü auch in einer reihe dargestellt wird.
Schade eigentlich. Ich finde diesen Border als strukturierung sehr gut, und dem Gesamtkonzept nicht abträglich.
der ie hingegen ignoriert scheinbar die height angabe für das obere menü sowie die width angabe für das linke submenü.
Das width kann man den IE über <colgroup> http://de.selfhtml.org/html/tabellen/aufbau.htm#vordefinieren beibringen.
Bei height sieht das etwas schieriger aus. Zum einen kannst Du es versuchen mit <tr style="height:30px">, zum andreren kannst Du es mit<td colspan="2" id="topnav">
<div style="height:30px"><!--#include virtual="topnav.shtml" -->
</div>
</td>versuchen.
Gruß aus Berlin!
eddi-
hallo powered by cigarettes and alcohol :))))),
(den Spruch finde ich super!)entspricht nur der wahrheit. alles belegbar. ;)
Bei height sieht das etwas schieriger aus. Zum einen kannst Du es versuchen mit <tr style="height:30px">, zum andreren kannst Du es mit
<td colspan="2" id="topnav">
<div style="height:30px"><!--#include virtual="topnav.shtml" -->
</div>
</td>versuchen.
danke für den tip, hat aber leider beides nicht geklappt. ich meine es muss doch irgend'ne möglichkeit geben (die auch im ie funzt), einer tabellenzelle mit colspan eine feste höhe zuzuweisen. hat noch jemand ne idee?
gruss,
simme-
hallo simme,
na dann eben über eben übers Knie brechen:
Lösche den rowspan heraus und gib dem <tr> dieser zeile die gewünschten 30px, daß sollte selbst ein IE endlich erkennen (Notfalls auch mit dem <div style="height:30px">.
Wenn ich es noch richtig im Kopf habe ist das einzige, was dem im Wege stünde das Bild der linken Spalte. Dieses positionierst Du absolute und gibst der ersten Zelle dritter Zeile padding-top:[Bildlänge-cellspacing-30]px. Wirklich gekonnt ist das selbstverständlich nicht.Daher überdenke doch mal den Einsatz von float:
<div style="text-align:center"><!-- für den IE -->
<div style="width:[Deine Breite];margin:auto;margin-bottom:[Dein Leerraum]">
<!-- Inhalt oberster Zelle -->
</div>
<div style="width:[Deine Breite];margin:auto">
<div style="width:[Deine Breite der linken rowspan-Zelle];float:left;margin-right:[...]">
<!-- Linkes Menü mit den Bildern -->
</div>
<div style="height:30px;[notfalls mit padding Ausrichtung des Texts korigieren];margin-right:[...]">
<!-- Dein 30px-Menü -->
</div>
<div style="width:[Deine Breite der zweiten Menü-Zelle]">
<!-- Deine Verweise -->
<div>
<div>
<!-- Der eigentliche Inhalt -->
</div>
</div>
</div>Gruß aus Berlin!
eddi-
moin moin.
Lösche den rowspan heraus und gib dem <tr> dieser zeile die gewünschten 30px, daß sollte selbst ein IE endlich erkennen (Notfalls auch mit dem <div style="height:30px">.
Wenn ich es noch richtig im Kopf habe ist das einzige, was dem im Wege stünde das Bild der linken Spalte. Dieses positionierst Du absolute und gibst der ersten Zelle dritter Zeile padding-top:[Bildlänge-cellspacing-30]px. Wirklich gekonnt ist das selbstverständlich nicht.ich glaub ich werd dem content-bereich einfach ne höhe zuweisen und fertig. ist zwar auch nicht wirklich elegant, scheint aber browserkompatibel zu sein.
Daher überdenke doch mal den Einsatz von float:
hab mir gerade mal dein grundgerüst angeschaut und prompt 3 verschiedene darstellungen in 3 verschiedenen browsern bekommen. ich wag mich da ehrlich gesagt noch nicht ran, solch ein layout ohne tabellen umzusetzen, da vor allem auch die jeweiligen höhen von der linken rowspan-zelle und dem content-bereich auch abhängig voneinander sein sollen.
ich dank dir für deine mühen!
simme
-
-
-