IE Bug? Tabellen beginnen unter Navi

[B-ellanna]

Hallo,
Ich hab bis jetzt meine Seiten immer mit Mozilla und Opera angesehen und oh Schreck im IE sehen meine Seiten mit Tabellen drin ganz furchtbar aus.
Denn die Tabelle fängt erst unterhalb der Navigationsleiste an. Doch mein reiner Textinhalt wird brav rechts neben der Navigation dargestellt.
das sieht ungefähr so aus:
NAVI Text
NAVI Text
NAVI Text
NAVI Text
NAVI Text
Und beim Fehler ungefähr so:
NAVI
NAVI
NAVI
NAVI
NAVI
    Tabelle
    Tabelle

Was macht denn das blöde IE Ding da und wie kann ich dem entgegenwirken?
Vielen Dank für eure Hilfe!
B-ellanna

[afra]

Hallo B-ellanna!

Mit Deinen Angaben kann ich nur raten. Und ich vermute, dass Du eine feste Breite für den rechten Bereich oder die gesamte Seite vergeben hast, was dazu führt, dass Deine Tabellen die vermutlich zu breit für diese fest vorgegebene Breite sind, nicht darin unter kommen, daher wird die Tabelle dahin geschoben wo sie "Platz" hat, nämlich unter die Navi eingerückt um ein Margin, das Du eventuell definiert hast...

Du siehst, alls nur geraten. Aber vielleicht hilft es doch.

Schönen Gruß

Afra

[B-ellanna]

Du siehst, alls nur geraten. Aber vielleicht hilft es doch.

Hi Afra,
Ich denke das mit dem raten ist nicht so sinnvoll, deshalb werde ich wohl besser mal meinen Quelltext anhängen. Vorsicht, ist ein wenig lang!
Ich hoffe nun kann man mir deutlicher erklären was der Fehler sein kann. Denn das vorher hab ich eindeutig nicht begriffen.
Tausen Dank,
B-ellanna

CSS:
body {
  background-image:url(./bilder/parchmentbackground.gif);
  font-family: "Times New Roman", Times, serif;
  text-decoration: none;
  font-size: 100.01%;
  margin: 0; padding: 1em 0;
  text-align: center;
  }

div#Seite {
  text-align: left;    /* Seiteninhalt wieder links ausrichten */
      margin: 0 auto;      /* standardkonforme horizontale Zentrierung */
      width: 90%;
      padding: 0;
      color:black;
      background: #fcde9c;
      border: 2px ridge silver;
    }

h1  {
  font-size: 3em;
      text-align: left;
      margin: 0; padding: 0.3em;
      color: #533802;
      background: #fcde9c url(./bilder/header.gif) no-repeat center;
      border-bottom: 1px solid silver;
    }

ul#Navigation {
  font-size: 1.0em;
      float: left;
      width: 10em;
      margin: 0; padding: 0;
      border: none;
      color:#995c00;
      background-color: #fcde9c;
      text-align: center;
    }

ul#Navigation li {
  list-style: none;
      margin: 0.1em; padding: 0.1em;
    }

ul#Navigation a {
      display:block;
      padding: 0.2em;
      width: 10em;
      text-decoration: none;
      font-weight: bold;
      line-height:2em;
      border: 0px solid black;
      border-left-color: white;
      border-top-color: white;
      color: #995c00;
      background: #fcde9c url(./bilder/Parchment_off.gif) no-repeat center;
      }

ul#Navigation a:hover {
      border-color: white;
      border-left-color: black;
      border-top-color: black;
      color: #fcde9c;
      background: #fcde9c url(./bilder/Parchment_on.gif) no-repeat center;
      }

div#Inhalt {
  font-size: 0.85em;
      margin: 0 0 0 17em;
      padding: 0;
      text-align: justify;
    }

div#Inhalt a{
  color:#336600;
  font-weight: bold;
  }

div#Inhalt a:visited{
  color:#533802;
  font-weight: bold;
  }

div#Inhalt h2 {
  font-size: 2.0em;
  margin: 0.2em 0;
  color: black;
  background: #fcde9c;
    }

div#Inhalt h3 {
  font-size: 1.5em;
  margin: 0.2em 0;
  color: black;
  background: #fcde9c;
  }

div#Inhalt ol{
  list-style:none;
  }

div#Inhalt table#Termine{
  width:100%;
  text-align:left;
  vertical-align:top;
  table-layout:fixed;
  }

div#Inhalt td#Termine{
  text-align:left;
  vertical-align:top;
  border:none;
  }
div#Inhalt table#Intern{
  width:100%;
  text-align:left;
  vertical-align:top;
  table-layout:fixed;
  }

div#Inhalt td#Intern{
  text-align:left;
  vertical-align:top;
  border:thin solid #533802;
  }
div#Inhalt table#Links{
  width:100%;
  table-layout:fixed;
  }

div#Inhalt td#Links{
  text-align:center;
  vertical-align:center;
  border:none;
  }
div#Inhalt img{
  border:0;
  }

.right{
  margin:0 1em 0 1em;
  float:right;
  }
.left{
  float:left;
  margin:0 1em 0 1em;
  }
.textrechts{
  text-align:right;
  }
.textlinks{
  text-align:left;
  }
.textcenter{
  text-align:center;
  }
p#Fusszeile {
      clear: both;
      font-size: 0.8em;
      margin: 0; padding: 0.1em;
      text-align: center;
      background-color: #FFCC80;
      color:#533802;
      border-top: 1px solid silver;
    }

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<link rel="stylesheet" type="text/css" href="Maus.css">
<link rel="shortcut icon" href="favicon.ico">
<title>Termine</title>

<meta name="description" content="Termine von Mittelalterm&auml;rkten an denen Mus Rustiucs teilnimmt.">
<meta name="author" content="Christina Stacke">
<meta name="keywords" content="Termine Auftritte Mus Rusticus">
<meta name="generator" content="(X)HTML-Format">
</head>

<body>
<div id="Seite">
 <h1>Ober&uuml;berschrift</h1>
 <ul id="Navigation">
     <li><a href="Termine.htm">Termine</a></li>
     <li><a href="Angebot.htm">Angebot</a></li>
     <li><a href="Gefolge.htm">Gefolge</a></li>
     <li><a href="Bilder.htm">Bilder</a></li>
     <li><a href="Links.htm">Links</a></li>
    <li><a href="Intern.htm">Intern</a></li>
     <li><a href="KontaktImpressum.htm">Kontakt & Impressum</a></li>
     <a href="Startseite.htm"><img src="./Bilder/WappenFoto.gif" alt="Wappen" border="0"></a>
 </ul>
 <div id="Inhalt">
 <h2>2006</h2>
<table id="Termine">
<tr>
    <td style="width:15%" id="Termine">April
    </td>
    <td id="Termine"><b>22.-23.04.2006</b><p>3. Burgfest Ranis, u.a. mit "Pampatut", "Scharlatan" und "Mus Rusticus"</p><p>(Lager und Schauk&auml;mpfe)</p>
    </td>
</tr>
<tr>
    <td style="width:15%" id="Termine">Mai
    </td>
    <td id="Termine"><b>05.-06.05.2006</b><p>Bl&uuml;tenfest Siloha bei Neufrankenroda</p><p>(Lager und Schauk&auml;mpfe + Feldschlacht)</p>
    </td>
</tr>
<tr>
    <td style="width:15%" id="Termine">Juni
    </td>
    <td id="Termine"><b>16.-18.06.2006</b><p>Kr&auml;merbr&uuml;ckenfest in Erfurt</p><p>(Lager und Schauk&auml;mpfe)</p>
    </td>
</tr>
<tr>
    <td style="width:15%" id="Termine">Juli
    </td>
    <td id="Termine"><b>14.-16.07.2006</b><p>Stadtfest Aue</p><p>(Lager und Schauk&auml;mpfe)</p>
    </td>
</tr>
<tr>
    <td style="width:15%" id="Termine">September
    </td>
    <td id="Termine"><b>08.-10.09.2006</b><p>Mittelaltermarkt 1050 Jahre Liebst&auml;dt</p><p>(Lager und Schauk&auml;mpfe)</p>
    <p><b>30.09.-01.10.2006</b></p><p>Mittelalterspektakel Torgau, u.a. mit "Pampatut", "Mus Rusticus" und "Dectera Lugh"</p><p>(Lager und Schauk&auml;mpfe)</p>
    </td>
</tr>
<tr>
    <td style="width:15%" id="Termine">Oktober
    </td>
    <td id="Termine"><b>13.-15.10.2006</b><p>Zwiebelmarkt Weimar</p><p>(Lager und Schauk&auml;mpfe)</p>
   </td>
</tr>
</table>

</div>
 <p id="Fusszeile">
  &copy; 2006 B-ellanna
      </p>
</div>

</body>
</html>

[afra]

Hallo B-ellanna!

Und ich glaube, es ist wie von mir beschrieben. Dein Division Inhalt hat neben der Navigation keinen Platz, da das umschließende Seite Div eine Breite vorgibt und rutscht daher "unter" die Navigation. Inhalt kann wegen des definierten Margin-left aber nicht ganz nach links rutschen.

Das verhalten würde ich sogar als korrekt bezeichnen. Sieht aber halt nicht aus, wie Du es Dir wünscht. Versuche die darstellbare Breite zu vergößern, oder die Tabelle zu verkleinern.

Schönen Gruß

Afra

[afra]

Hallo B-ellanna!

Ich habe gerade noch gesehen, dass Dein Table 100% Breite hat. Das ist wohl der "Fehler".

Mache Dir auch mal Gedanken wofür text-align: center steht und was damit zentriert werden soll: Text und keine Divisions. Dafür gibt es passendere Möglichkeiten (margin: auto)

Schönen Gruß

Afra

[B-ellanna]

Hallo B-ellanna!

Ich habe gerade noch gesehen, dass Dein Table 100% Breite hat. Das ist wohl der "Fehler".

Das hat mit so gut geklappt, jetzt ist die Zabelle einfach 95% breit und es sieht in IE Firefox und Opera gut aus.

Mache Dir auch mal Gedanken wofür text-align: center steht und was damit zentriert werden soll: Text und keine Divisions. Dafür gibt es passendere Möglichkeiten (margin: auto)

Was speziell meinst du denn damit? Mir ist nicht ganz klar an welcher Stelle ich das fälschlicherweise benutzt habe?

Danke,
B-ellanna

[afra]

Hallo B-ellanna!

Was speziell meinst du denn damit? Mir ist nicht ganz klar an welcher Stelle ich das fälschlicherweise benutzt habe?

Du zentrierst Deinen Body und hebst diese Zentrierung dann im Inhalt wieder auf. Überflüssog. Lass das zentrieren des Inhaltes und zentriere diesen mit dafür vorgesehenen Mitteln. e.g.: margin: 0 auto 0 auto;

Wie kann ich Inhalte genau in der Mitte des Anzeigefensters positionieren?

Schönen Gruß

Afra

[Mathias Bigge]

Hi B,

unterlasse bitte solche Postings und gib Dir die Mühe Deinen Code auf die relevanten Ausschnitte zu kürzen oder gib eine URL an.

Viele Grüße
Mathias Bigge

[B-ellanna]

unterlasse bitte solche Postings und gib Dir die Mühe Deinen Code auf die relevanten Ausschnitte zu kürzen oder gib eine URL an.

Sorry, da ich nicht wußte wo der Fehler liegt hab ich lieber mal alles reingeschrieben. Die einzelnen Dinge beeinflussen sich in für mich nämlich undurchschaubarer Weise.

Versuche es das nächste mal besser.
Danke
B-ellanna