Thomas: Anzeige Bug im IE 5.5, 6 und 7

Beitrag lesen

Hallo zusammen,

ich habe ein sehr mysteriöses Problem! Ich habe im Internet bis jetzt keine Lösung finden können, vielleicht kann mir hier jemand helfen?

Also zuerst mal der Quelltext der Seite!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2002/REC-xhtml1-20020801/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />  
<title>Musikverein Hohestadt e. V. ** Mitgliederverwaltung **</title>  
<link href="bildschirm.css" rel="stylesheet" type="text/css" media="screen" />  
<link href="druckversion.css" rel="stylesheet" type="text/css" media="print" />  
  
  
<!--[if lt IE 6]>  
<style type="text/css">  
 	 @import url(ie5x.css);  
</style>  
<![endif]-->  
  
<!--[if lte IE 7]>  
<style type="text/css">  
 	 @import url(ie5-6.css);  
</style>  
<![endif]-->  
  
  
<!--[if IE 7]>  
<style type="text/css">  
  	@import url(ie7.css);  
</style>  
<![endif]-->  
  
</head>  
  
<body id="mitgliedersuche">  
  
<div id="wrapper">  
  
<div id="kopfbereich">  
  
	<div class="skiplink"><a href="#textbereich">Zum Inhalt</a></div>  
	  
  
<div class="letztesupdate">  
<img src='src/time.png'><strong>Aktualisiert</strong>//12.04.2009</div>  
  
<h1>  
<a href="index.php" title="Zur&uuml;ck zur Startseite"><img src="src/logo.png" id="logo"></a>  
</h1>  
  
  
</div><!-- Ende kopfbereich -->  
  
  
  
<div id="navilinks">  
  
  
<h5 class="titelnavigation">Information</h5>  
  
<ul>  
	<li><a href="index.php" title="Zur Startseite">Startseite</a></li>  
  
	<li><a href="chronik.php" title="Die Geschichte des MVH">Chronik</a></li>  
	<li><a href="neuigkeiten.php" title="Hier erfahrt Ihr alle Neuigkeiten">Neuigkeiten</a></li>  
	<li><a href="termine.php" title="Alle aktuellen Termine in der Übersicht">Termine</a></li>  
	<li><a href="bergrebellen.php" title="Unsere Stimmungsband - die Bergrebellen"><strong>die Bergrebellen</strong></a></li>  
	<li><a href="jugend.php" title="unser Jugendprogramm">Jugendausbildung</a></li>  
	<li><a href="freunde.php" title="Links zu Freunden">Freunde</a></li>  
  
</ul>  
  
<h5 class="titelnavigation">Interaktiv</h5>  
  
<ul>  
	<li><a href="bilder.php" title="zur Bildergalerie">Bildergalerie</a></li>  
	<li><a href="forum.php" title="Musikerforum">Forum</a></li>  
	<li><a href="gaestebuch.php" title="zum G&auml;stebuch">G&auml;stebuch</a></li>  
</ul>  
  
<h5 class="titelnavigation">Kontakt</h5>  
  
<ul>  
	  
	<li><a href="kontakt.php" title="Schreiben Sie uns eine Email">E-Mail</a></li>  
	<li><a href="impressum.php" title="Impressum">Impressum</a></li>  
</ul>  
  
<h5 class="titelnavigation">Administration</h5>  
  
<ul>  
  
	<li><a href="adminlogin.php" title="Zugang zum Verwaltungsbereich">Admin-Zugang</a></li>  
</ul>  
  
  
</div><!-- Ende navibereich -->  
  
  
  
<div id="textbereich">  
  
<!-- Inhalt der Startseite -->  
  
<p class='logout'>Hallo <img src='src/user.png'><strong>Gast</strong>//<img src='src/action_delete.png'><a href='logout.php'>Ausloggen</a></p>  
  
  
  
<p>Du hast nach: "<span class='postedfrom'><label></label></span>" gesucht. Es wurden folgende Eintr&auml;ge gefunden:</p><p>Zahl der Eintr&auml;ge: <strong>159</strong></p><table class='mitglieder'>  
<tr><th>Name</th><th>Vorname</th><th>geb.</th><th>Strasse</th><th>PLZ</th><th>Ort</th><th>Geburtstag</th><th>Eintritt</th><th>Austritt</th><th>Funktion</th><th>derzeit aktiv</th><th>Helfer</th><th>Jugendorchester</th><th>Bergrebell</th><th>Position</th><th>aktiv von</th><th>bis</th><th>Hochzeitstag</th><th>verstorben</th>  
  
<th>Hauptinstrument</th><th>Zweitinstrument</th><th>Drittinstrument</th><th>hilft aus</th><th>Telefon</th><th>Handy</th><th>E-Mail</th><th>sonstige Informationen</th>  
</tr>  
</table>	  
  
<p><img src="src/arrow_back.png"><a href="mitgliederverwaltung.php">zur&uuml;ck zum Suchformular</a><br>  
<img src="src/arrow_back.png"><a href="verwaltung.php">zum Verwaltungsbereich</a></p>  
  
<p class="nachoben">  
<img src="src/arrow_top.png"><a href="#kopfbereich" title="Nach oben springen">nach oben</a>  
</p>  
<!-- Anfang fuss.inc.php -->  
</div><!-- Ende #textbereich -->  
<div id="fussbereich">  
	  
<address><em>Musikverein Hohestadt e. V.</em> &middot; 1. Vorstand: Joachim Wimmer<br>  
  
Blumenring 19 &middot; 97199 Ochsenfurt &middot; Tel: 09331-3824 &middot; <a href="impressum.php" title="Impressum">Impressum</a><br clear="all"></address>  
  
  
</div><!-- Ende fussbereich -->  
  
</div><!-- Ende wrapper -->  
  
</body>  
</html>  

Es wird mittels PHP eine Tabelle generiert die je nach Suchanfrage Daten ausgibt. Das Problem ist jetzt dass die Tabelle durch die vielen Reihen sehr breit ist.

Das CSS dazu sieht wie folgt aus:

  
  
#navilinks  {  
    float: left;  
    display: inline;  
    margin: 0 0 1em 3em;  
    width: 130px;  
	 border:1px solid blue;  
}  
#navilinks ul  {  
    margin-bottom: 1em;  
}  
#navilinks li  {  
    list-style: none;  
    background-color: white;  
}  
#textbereich {  
    margin: 2em 3em 1em 190px;  
	 border:1px solid red;  
}  
  
.mitglieder {  
    border-collapse: collapse;  
	}  
	  
.mitglieder th {  
		color: #CE4F11;  
   	 text-align: left;  
    	padding: 3px 1em;  
    	border: 1px solid #CCC;  
}  
.mitglieder td {  
    	text-align: left;  
    	padding: 3px 1em;  
    	border: 1px solid #CCC;  
}  
  
  

Sooo... das Problem ist jetzt folgendes. Links wird die Navigation angezeigt und rechts daneben ganz normal der Inhalt der Seite. Im IE8, FF und im Opera ist alles wunderbar. Im IE5,6 und 7 jedoch rutscht die Tabelle jetzt unter die Navigation!

Hier sind 2 Bilder

Das linke Bild zeigt den Fehler und das rechte wie es normalerweise richtig Aussehen sollte!

Wäre super wenn das Problem jemand lösen könnte :)

gruß und vielen Dank für alle die sich das Problem wenigstens mal anschauen!

Thomas