Max: [CSS] Tabellen "brechen aus"

SELF-Forum

[CSS] Tabellen "brechen aus"

Max
– Informationen zu den Bewertungsregeln

Hallo!

Ich habe eine Seite mit Hilfe von Div's in verschiedene Bereiche aufgeteilt. Wenn ich jetzt im "Content" Bereich eine Tabelle mit dem style "width:100%;" einsetze, wird diese im Firefox ordentlich angezeigt, jedeoch im Internet Explorer "bricht" sie aus.
Hier 2 Screenshots:
Firefox (richtige Anzeige): http://www.mmprogramming.de/problem/firefox.jpg
IExplorer (falsche Anzeige): http://www.mmprogramming.de/problem/iexplorer.jpg

Code:
Index.php:
<html>
<head>
 <link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
 <div class="header" align="center">banner</div>
 <div class="navi" id="navi">
  <span class="font_menu_top">[Men&uuml;]</span><br />
  <span class="font_menu_sub">
   &raquo;&nbsp;<a href="?page=home">Startseite</a><br />
   &raquo;&nbsp;<a href="#">Chat</a><br />
  </span>
 </div>
 <div class="content">
  <table width="100%" border="1">
   <tr><td>asufsdhfsklfhds</td></tr>
  </table>
 </div>
 <div class="footer" align="center">Copyright &copy; 2004 - 2005</span></div>
</body>
</html>

style.css:
body{
margin:0px;
line-height:1.0em;
padding:0px;}

.header{
background:#B5D5EA;
border:1px solid black;
margin-left:5px; margin-top:5px; margin-right:5px;
height:60px;}

.navi{
background:#B5D5EA;
float:left;
border:1px solid black;
padding:5px;
margin-left:5px; margin-top:5px; margin-bottom:5px;
width:150px;}

.content{
background:#E6ECF0;
padding:5px; padding-bottom:20px;
margin-left:170px; margin-top:5px; margin-right:5px; margin-bottom:5px;
border:1px solid black;}

.footer{
background:#B5D5EA;
height:20px; width=100%;
clear:left;
margin-left:5px; margin-right:5px; margin-bottom:5px;
border:1px solid black;}

.font_copyright{
vertical-align:middle;}

.font_menu_top{
font-size:14px;
font-weight:600;}

.font_menu_sub{
font-size:14px;
line-height:0.9em;
font-weight:600;}

Beispiel: http://www.mmprogramming.de/problem/index.php

Das Problem dürfte aus den beiden Screenshots leicht ersichtlich sein ;-)
Hoffe, dass jemand weiß, was falsch ist.

Gruss

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. [CSS] Tabellen "brechen aus"

    Daniel
    – Informationen zu den Bewertungsregeln

    Ahoi Max,

    <div class="content">
      <table width="100%" border="1">
       <tr><td>asufsdhfsklfhds</td></tr>
      </table>
    </div>

    .content{
    background:#E6ECF0;
    padding:5px; padding-bottom:20px;
    margin-left:170px; margin-top:5px; margin-right:5px; margin-bottom:5px;
    border:1px solid black;}

    da wird das problem liegen, das content div hat keine breite. außerdem
    solltest du dir überlegen ob wirklich jedes div (z.B. das banner) nötig ist.

    MfG

    --
    Alle Angaben wie immer ohne Gewähr
    PPPS: ich trinke gerne ab und an mal eine tote Tante.
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. [CSS] Tabellen "brechen aus"

    wahsaga Homepage des Autors
    – Informationen zu den Bewertungsregeln

    hi,

    wie daniel schon anmerkte, kochst du da eine ziemlich unschmackhafte div-suppe.

    <body>
    <div class="header" align="center">banner</div>

    ggf. durch eine überschrift <hX> ersetzen.

    <div class="navi" id="navi">
      <span class="font_menu_top">[Men&uuml;]</span><br />
      <span class="font_menu_sub">
       &raquo;&nbsp;<a href="?page=home">Startseite</a><br />
       &raquo;&nbsp;<a href="#">Chat</a><br />
      </span>
    </div>

    dieser bereich möchte gerne eine liste sein, <ul>/<ol> und <li>.

    <div class="content">
      <table width="100%" border="1">
       <tr><td>asufsdhfsklfhds</td></tr>
      </table>
    </div>

    wozu "brauchst" du hier eine tabelle?
    wenn die wirklich nur eine zeile mit einer zelle enthalten sollte - dann ist sie absolut überflüssig.
    und wenn keine wirklich tabellarischen daten hineinkommen sollen, dann ist sie vermutlich auch eher fehl am platze, und durch sinnvolleres markup zu ersetzen.

    <div class="footer" align="center">Copyright &copy; 2004 - 2005</span></div>

    was will </span> denn hier?

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln