Page wird im IE nicht korrekt dargestellt.

FingerSkill

Erfahrenes Mitglied
Hoi,
ich bin schon fast am verzweifeln. Und zwar wird die Seite im IE nicht korrekt dargestellt und ich weiss einfach nicht warum. Und zwar ist das untere Menü mit den vier Menüpunkten im IE falsch.

Hier bissle source (HTML):
HTML:
<html>
  <head>
    <title>Haunsberg Teufel'n</title>
    <link rel="stylesheet" type="text/css" href="css/main.css" />
  </head>
  <body>
    <div id="Container">
      <div id="BorderLeft">&nbsp;</div>
      <div id="Content">

        <div id="Logo">&nbsp;</div>
        <div id="NavigationTop">
          <table width="100%">
            <tr>
              <td class="Navigation"><a href="index.htm" class="Navigation">Home</a></td>
              <td class="Navigation"><a href="about.htm" class="Navigation">Über uns</td>
              <td class="Navigation"><a href="member.htm" class="Navigation">Mitglieder</td>

              <td class="Navigation"><a href="gallery.php" class="Navigation">Galerie</td>
              <td class="Navigation"><a href="links.htm" class="Navigation">Links</td>
              <td class="Navigation"><a href="contact.htm" class="Navigation">Kontakt</td>
            </tr>
          </table>
        </div>
        <div id="Text">Home</div>

        <div id="NavigationBottom">
          <table width="100%">
            <tr>
              <td class="Navigation"><a href="events.htm" class="Navigation">Veranstaltungen</td>
              <td class="Navigation"><a href="showrun.htm" class="Navigation">Perchtenshowlauf</td>
              <td class="Navigation"><a href="basar.htm" class="Navigation">Basar</td>
              <td class="Navigation"><a href="guestbook.php" class="Navigation">Gästebuch</td>

            </tr>
          </table>
        </div>
      </div>
      <div id="BorderRight">&nbsp;</div>
    </div>
  </body>
</html>

Styles:
HTML:
*
{
	margin:0 auto;
	padding:0;
}

html, body
{
	background-color:#000000;
	width:100%;
}

#Container
{
	margin-top:1%;
	width:1000px;
	height:700px;
	background-color:#FFFFFF;
}

#BorderLeft
{
	width:230px;
	height:700px;
	float:left;
	background-image: url(../img/layout/border_left.jpg);
}

#Content
{
	width:540px;
	height:700px;
	float:left;
}

#Logo
{
	width:540px;
	height:115px;
	background-image: url(../img/layout/logo.png);
}

#NavigationTop
{
	height:35px;
	width:540px;
	background-color:#000000;
}

#Text
{
	padding-top:40px;
	padding-left:38px;
	overflow:auto;
	width:540px;
	height:475px;
	background-image: url(../img/layout/bg.jpg);
	color:#000000;
}

#NavigationBottom
{
	height:35px;
	width:540px;
	background-image: url(../img/layout/navigation_bottom.jpg);
}

#BorderRight
{
	width:230px;
	height:700px;
	float:left;
	background-image: url(../img/layout/border_right.jpg);
}

.Navigation
{
	color:FFFFFF;
	font-family: Verdana, Arial;
	font-weight:bold;
	text-align:center;
	text-decoration:none;
}

Hoffe jemand von euch findet gleich den Fehler.

Vielen Dank & Grüsse, Finga
 
Hi,

und was genau wird bei dir von welchem IE (6, 7) an dem unteren Menü falsch dargestellt? Ich entdecke nämlich in beiden Versionen soweit keine Darstellungsunterschiede zu den übrigen Browsern.

Übrigens fehlt in deinem HTML-Code bis auf "Home" bei allen Links das schliesende </a>-Tag.

mfg Maik
 
Okay, mit etwas Hintergrund-Farbe für die einzelnen Seitenbereiche kommt der Unterschied dann auch klar zum Vorschein :-)

Das HTML-Dokument übergibst du in dieser Form ohne jegliche Dokumenttyp-Deklaration den Browsern im Darstellungsmodi "Quirksmode", in dem der IE das angewandte Boxmodell für #Text nicht unterstützt.

Lösung: Deklariere einen entsprechenden Doctype, damit das Dokument im standardkonformen Modus übergeben wird - siehe hierzu:


mfg Maik
 
Zurück