Darstellungsproblem im IE

[Tom2]

Hi Leute

Heute ist mir vielleicht etwas seltsames passiert... Ich feile nun schon seit etwa zwei Wochen an einer kleinen Internetseite und bis heute lief alles rund. Bis heute: Da ich mit dem Design fertig bin wollte ich eine kleine Vorlage für die weiteren Seiten erstellen und habe dazu den Inhalt einer Seite durch etwas unsinniges (für Menschen) ersetzt. Die Seite ist in vier div-Bereiche gegliedert: Kopfzeile, Menü, Inhalt und Fusszeile. In der Seite, welche ich zu einer Vorlage machen wollte, ist eine hübsche Tabelle im Inhalts-div. Darin habe ich ein alle Zeilen bis auf eine gelöscht. Natürlich wolle ich mir die Vorlage auch im Browser ansehen: Mein Mozilla stellte sie anstandslos dar, nur im IE (Version 5.01) war die Tabelle nicht zu sehen. Man konnte auch nichts markieren, sie wurde einfach nicht dargestellt!
Selbstkritisch, wie ich bin, habe ich von Auge den Code geprüft und es sofort nochmals probiert, nur habe ich diesmal etwas weniger aus der ursprünglichen Tabelle gelöschen. Das Ergebnis war dasselbe. Danach habe ich die Datei einmal durch den HTML-Validator gejagt, welcher die Datei auf Anhieb als valide bezeichnete. Langsam wurde ich stutzig...
Die Tabelle habe ich dann probeweise einmal gelöscht, und vor lauter guter Laune eine horizontale Linie (hr) hingemalt... naja, jedenfalls geschrieben (oder ausgezeichnet, um korrekt zu sein), denn dargestellt wurde auch diese nicht. Absätze und roher Text wurden seltsamer Weise an gleicher Stelle korrekt dargestellt.
Unbetrübt habe ich einen anderen PC angeworfen, um das Phänomen zu ergründen, jedoch kam es etwas anders als ich mir das erhofft habe:
Ich öffnete die Datei im IE 6.0 und staunte nicht schlecht, als ich die Tabelle und die horizontale Linie sah. Nur: Jetzt hat er mir das Layout zerrissen! Das Menü-div war pötzlich ungewöhnlich breit _und_, jetzt kommt der Hammer; Ein Menüeintrag, 'Aktuelle Anlässe' hat er mir in 'Aktuelle Anl' und auf einer neuen Zeile aber in demselben Link 'Anlässe' zerrissen! Und zwar bei all meinen Seiten! Habt ihr schon ein mal so etwas gesehen? Ich nicht. Dann habe ich natürlich noch einen dritten PC hochgefahren, mit Win2k und IE 5.irgenwas. Auch da wurden alle Files wie auf dem zweiten PC falsch dargestellt! Das Stylesheet war mein nächster Gedanke, jedoch wurde auch dieses anstandslos vom Validator geschluckt...
Ich bin am Ende meines Lateins und ihr warscheinlich des Lesens müde. Was tue ich nun? Hat vielleicht jemand einen Ratschlag für mich? Die universale Textmalmaschine stellt doch sonst alles dar, wieso gerade meinen Code nicht?

FG & besten Dank

Tom2

[MudGuard]

Hi,

Ich bin am Ende meines Lateins und ihr warscheinlich des Lesens müde. Was tue ich nun? Hat vielleicht jemand einen Ratschlag für mich? Die universale Textmalmaschine stellt doch sonst alles dar, wieso gerade meinen Code nicht?

Weil in Zeile 17 ein " fehlt.

Ne, im Ernst: wie soll man helfen, wenn Du den relevanten Code nicht zeigst? Link auf die Seite wäre nicht schlecht.

cu,
Andreas

[Tom2]

Hi Andreas

Ne, im Ernst: wie soll man helfen, wenn Du den relevanten Code nicht zeigst? Link auf die Seite wäre nicht schlecht.

Leider steht die Seite noch nicht im Internet. Am Code ist wirklich nichts ausergewöhnliches. Ich poste ihn mal hier:

Das Stylesheet style.css:
   h1, h2, h3, h4, h5, h6 {
       color:#000000;
       font-family:Arial, sans-serif;
       font-stretch:semi-expanded;
       font-weight:normal;
   }
   .h1, .h2, .h3, .h4, .h5, .h6 {
       color:#C00;
       font-family:Arial, sans-serif;
       font-stretch:semi-expanded;
       font-weight:bold;
   }
   p, td, li {
       color:#000;
       font-family:Arial, sans-serif;
   }
   .b {
       font-weight:bold;
   }
   .dateline {
       border-color:#C00;
       border-style:solid;
       border-width:0px;
       border-top-width:3px;
   }
   .date {
       border-color:#C00;
       border-style:solid;
       border-width:0px;
       border-top-width:3px;
       color:#C00;
       font-weight:bold;
       text-align:right;
       vertical-align:top;
   }
   .entry {
       border-color:#C00;
       border-style:solid;
       border-width:0px;
       border-top-width:1px;
   }
   .red {
       color:#C00;
   }
   .menu {
       color:#C00;
       font-weight:bold;
       text-decoration:none;
   }
   .submenu {
       color:#000;
       font-weight:normal;
       margin-left:10%;
       text-decoration:none;
   }
   .menu:visited, .submenu:visited {
       color:#A00;
   }
   .menu:hover, .submenu:hover {
       color:#D00;
   }
   .menu:active, .submenu:active {
       color:#E00;
   }
   body {
       background-color:#FFF;
       /* background-image:url(background1.jpg); */
       background-repeat:no-repeat;
       color:#000;
       margin:0px;
   }
   div {
       float:none;
       margin-bottom:20px;
       margin-left:20px;
       margin-right:30px;
       margin-top:10px;
       padding:5px;
   }
   #header {
       display:block;
       height:60px;
   }
   #menu {
       background-color:#EEE;
       border-color:#FFF;
       border-style:solid;
       border-width:2px;
       display:inline;
       float:left;
       margin-left:10%;
       padding-left:10px;
       width:18%;
       position:fixed;
   }
   #content {
       display:block;
       background-color:#EEE;
       border:none;
       margin-left:33%;
       margin-right:5%;
   }
   #footer {
       border:none;
       clear:both;
       display:block;
   }
/* EOF */

Und die HTML-Vorlage template.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <title>Aktuelle Anlässe</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
 </head>
 <body>
  <div id="header">
   <h1>webseiten <span class="h4">überschrift</span></h1>
  </div>
  <div id="menu">
   <p>
    <a class="menu" href="index.html">Hauptseite</a><br>
    <a class="menu" href="aktuell.html">Veranstaltungen</a><br>
     <a class="submenu" href="aktuell.html">Aktuelle Anlässe</a><br>
     <a class="submenu" href="#">Weitere Veranstaltungen</a><br>
    <a class="menu" href="vorstand.html">Vorstand</a><br>
    <a class="menu" href="#">Vereine</a><br>
     <a class="submenu" href="#">Frauenverein</a><br>
     <a class="submenu" href="#">vita activa</a><br>
    <a class="menu" href="#">Kontakt</a><br>
    <a class="menu" href="#">Links</a><br>
   </p>
  </div>
  <div id="content">
   <h2>seiten <span class="h2">überschrift</span></h2>
   <p class="red">dargestellter Teststring 1</p>
   <hr>nicht dargestellte Trennlinie und nicht dargestellte Tabelle (jedoch dargestellter Text) an PC 1<table><tr><td>asdf</td></tr></table>
   <p>dargestekkter Teststring 2</p>
  </div>
  <div id="footer">
   <p style="text-align:right;">evangelisch-reformierte <span class="h4">kirchgemeinde</span> sursee</p>
  </div>
 </body>
</html>

Bitte entschuldige die Umstände. Nochmals in Kürze:
PC1, IE 5.01: Im div 'content' wird weder die Trennlinie, noch die Tabelle dargestellt
PC2, IE 6 und PC3, IE 5.irgendwas: Das Menü ist zu breit und wenn ein Menü-Eintrag zwei Wörter enthält, so wird das zweite Wort abgehackt und auf einer neuen Zeile noch einmal dargestellt. Jedoch auch nicht immer: Der vita activa-Link ist in Ordnung.

Kommt dir der Fehler bekannt vor?

FG & besten Dank für deine Hilfe

Tom2

[Tom2]

Hi Andreas, hi Rest der Welt

Ha, ich habe den 'Fehler' nun gefunden! Wie? Das komplette Stylesheet auskommentiert und dann die Formatierungen wieder reingenommen, bis ich den Fehler gefunden habe. Der war folgender:

Das Stylesheet style.css:

-------------->8 *SNIP 8<------------------------

.submenu {
       color:#000;
       font-weight:normal;

margin-left:10%;    // Hier steckt der Fehler!

text-decoration:none;
   }

-------------->8 *SNAP 8<------------------------

Der Internet Explorer kommt mit der prozentualen Angabe nicht klar. Ich hab es in Pixel geändert und nun funktioniert es mit PC2 und PC3. Ob der Fehler bei PC1 auch behoben ist weiss ich nicht.

FG

Tom2