Layout der Seite wird im IE falsch dargestellt

Lacrima

Hallo zusammen,

ich soll für meine Schule eine Homepage erstellen. Bisher beschränkt sich meine Erfahrung auf das Instandhalten von einer Internetseite. Dort hatte ich also eine Vorlage, die ich lediglich weiterbearbeiten musste. Die läuft allerdings über frames, die ich jetzt nicht benutzen wollte/sollte/konnte.

Also habe ich die Schulseite mit Kompozer per Learning by Doing aufgebaut. Sieht im Firefox auch echt ganz gut aus. Im Internet-Explorer wird mir allerdings das Format zerschossen. Und ich hab nicht so wirklich Ahnung, wie ich den Fehler rausbekomme. Zumal ich ja ziemlicher Anfänger bin und auch Schwierigkeiten mit diesem ganzen Fachvokabular hab.
Wahrscheinlich steht die Lösung schon zwanzigmal hier und ich bin einfach zu doof, sie zu finden.

Damit ihr wisst, was ich meine, hab ich im Anhang drei Bilder. So, wie es eigentlich aussehen sollte (wie es FF auch anzeigt), dass, was der Schul-PC draus macht (ein etwas ältere Version des IE) und das, was die neueste IE-Version draus macht.

Ich hab jetzt keine Ahnung, was vom Quelltext ich posten muss, damit ihr mir weiterhelfen könnt, deswegen geb ich Euch mal alles. Ich hoffe, ihr verliert dann nicht völlig den Überblick

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html style="direction: ltr;" lang="de-de">
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>XXXXXXX</title>
  <meta
 content="XXXXXXXXXXXXX"
 name="description">
  <link rel="stylesheet" href="../stylesheet.css"
 type="text/css">
</head>
<body
 style="background-image: url(../../bilder/mauer_hintergrund.jpg); direction: ltr;">
<img src="../../bilder/titelzeile_schild.jpg"
 alt="Astrid-Lindgren-Schule"
 style="border: 3px solid ; width: 213px; height: 160px; float: left;">
<table style="height: 158px;">
  <tbody>
    <tr>
      <td style="height: 117px;" colspan="7"
 rowspan="1"><img style="width: 700px; height: 100px;"
 alt="XXXXXXXXXXX"
 src="../../bilder/titelzeile_schriftzug.gif"></td>
    </tr>
    <tr>
      <td
style="background-position: center; background-repeat: no-repeat; text-align: center; height: 40px; width: 140px; background-image: url(../../bilder/buttons/button.jpg);"><a
 class="menue" href="../home.html">Home</a><br>
      </td>
      <td
style="background-position: center; background-repeat: no-repeat; height: 40px; width: 140px; background-image: url(../../bilder/buttons/button.jpg);"><span
 style="color: rgb(255, 200, 0);" class="menue">Info</span><br>
      </td>
      <td
style="background-image: url(../../bilder/buttons/button.jpg); background-position: center; background-repeat: no-repeat; height: 40px; width: 140px;"><a
 class="menue" href="../schueler.html">Schüler</a><br>
      </td>
      <td
style="background-image: url(../../bilder/buttons/button.jpg); background-position: center; background-repeat: no-repeat; height: 40px; width: 140px;"><a
 class="menue" href="../wir.html">Wir</a><br>
      </td>
      <td
style="background-image: url(../../bilder/buttons/button.jpg); background-position: center; background-repeat: no-repeat; height: 40px; width: 140px;"><a
 class="menue" href="../schulleben.html">Schulleben</a><br>
      </td>
      <td
style="background-image: url(../../bilder/buttons/button.jpg); background-position: center; background-repeat: no-repeat; height: 40px; width: 140px;"><a
 class="menue" href="../kontakt.html">Kontakt</a><br>
      </td>
    </tr>
  </tbody>
</table>
<br>
<ul style="width: 170px;" id="Navigation">
  <li><a href="aktuelles.html">Aktuelles</a></li>
  <li><a href="rundgang.html">Rundgang</a></li>
  <li class="link">Schule</li>
  <li><a href="angebot.html">Angebot</a></li>
</ul>
<div style="margin-left: 221px; width: 755px;" id="Inhalt"><br>
Hier steht dann der Text....
<br>
<br>
</div>
<br>
<br>
</body>
</html>

Alles anzeigen

Dazu hab ich dann noch ein externes CSS-Stylesheet, das sieht so aus:

Code

/* Generated by KompoZer */
body {
  font-family: Helvetica,Arial,sans-serif;
}
table {
  border-style: none;
  border-width: 0px;
  text-align: center;
  background-color: transparent;
  font-weight: bold;
}
a:link {
  color: #333333;
  font-weight: bold;
}
a:visited {
  color: #333333;
  font-weight: bold;
}
a:hover {
  color: #c0c0c0;
  font-weight: bold;
}
a:active {
  color: #ff0000;
  font-weight: bold;
}
a.menue:link {
  font-weight: bold;
  color: #333333;
  text-decoration: none;
}
a.menue:visited {
  font-weight: bold;
  color: #333333;
  text-decoration: none;
}
a.menue:hover {
  color: #c0c0c0;
  font-weight: bold;
  text-decoration: none;
}
a.menue:active {
  color: #ff0000;
  font-weight: bold;
  text-decoration: none;
}
ul#Navigation {
  margin: 0;
  padding: 0;
  float: left;
  width: 22em;
  color: #333333;
  font-size: medium;
  line-height: 30px;
}
ul#Navigation li {
  margin: 0;
  padding: 0.5em;
  list-style-type: none;
  list-style-image: none;
  list-style-position: outside;
}
ul#Navigation a {
  padding: 0.2em;
  display: block;
  font-weight: bold;
}
ul#Navigation a:link {
  background-image: url(../bilder/buttons/button.jpg);
  background-position:  center center;
  background-repeat: no-repeat;
  text-align: center;
  color: #333333;
  text-decoration: none;
}
ul#Navigation a:visited {
  background-image: url(../bilder/buttons/button.jpg);
  background-position:  center center;
  background-repeat: no-repeat;
  text-align: center;
  text-decoration: none;
  color: #333333;
}
ul#Navigation a:hover {
  background-image: url(../bilder/buttons/button.jpg);
  background-position:  center center;
  background-repeat: no-repeat;
  text-align: center;
  text-decoration: none;
  color: silver;
}
ul#Navigation a:active {
  background-image: url(../bilder/buttons/button.jpg);
  background-position:  center center;
  background-repeat: no-repeat;
  text-align: center;
  text-decoration: none;
  color: red;
}
div#Inhalt {
  border: 4px double #ff9600;
  padding: 0 1em;
  min-width: 16em;
  background-color: #ffffcc;
  margin-left: 30em;
}
li.link {
  margin: 0;
  padding: 0.5em;
  background-position:  center center;
  background-repeat: no-repeat;
  font-weight: bold;
  color: #ffc800;
  text-align: center;
  display: block;
  font-size: medium;
  line-height: 36px;
  height: 36px;
  background-image: url(../bilder/buttons/button.jpg);
}
h1 {
  font-size: large;
  font-weight: bold;
  font-style: normal;
  text-transform: none;
  text-align: left;
  line-height: normal;
}

Alles anzeigen

Also, es wäre echt super lieb, wenn ihr mir da weiterhelfen könntet...

FaFoo

Die Versionen der IEs mit denen du getestet hast wären noch hilfreich. Allerdings sollte sich das auf 6 und 7 beschränken. Für ältere IEs solltest du die Seite nicht optimieren. Ich persönlich finde IE 6 auch schon kritisch, aber nutzen halt noch zu viele, leider.

Der 6er stellts bei mir allerdings schon genauso dar wie Firefox.

Neuroleptika

Ich nehme mal an deine Schule hat den Internet Explorer 5.5 oder 6.
Diese Browser verbreitern Block-Elemente (z.B <div>) wenn der Inhalt da nicht reinpasst. Vermutlich deswegen passt die Inhaltsbox (id="Inhalt") nicht neben die Navigation und rutscht unter die Navigation.

Dein Beispielinhalt besteht nur aus Text. Damit kann ich den Fehler nicht erkennen.
Wenn ich aber z.B ein breites Bild einfüge sieht es im IE5.0-IE6 so aus wie auf deinem mittleren screenshot.

yeti66

Tja wenn schon Tabelle dann richtig. Erzeuge eine Tabelle (Grundaufbau) mit einem Header der die Grafik der Schule (Logo) mit einschließt und der Navi in einer Spalte und dem Content in einer Spalte. Besser wäre der konsequente Neubeginn in CSS ohne Tabelle!!

Und dann postest Du das ganze als angehängte Datei mit den Grafiken im gepackten Zustand, damit wir auch was sehen. Dann sehen wir weiter.

Lacrima

also, danke schon mal für die bisherigen Antworten

FaFoo
Welche IE-Version wir in der Schule haben, kann ich erst am Mittwoch nachsehen.
Wäre halt schon gut, wenn zumindest dort die Seite ordentlich angezeigt wird

Der andere IE, der die Titelzeile nach unten verschoben hat, hat die Version 8Beta.

@Neuroepileptika:
Also in der ursprünglichen Seite steht in dem div auch nur Text, keine Bilder oder.
Es ein ganz normaler Fließtext - halt mit Informationen über die Schule. Hab die auch nur deswegen rausgenommen, weil die Seite eben noch off ist und mich ja nicht gleich jeder erkennen muss
Wenn es aber daran liegen sollte, was muss ich denn tun, damit der Fehler nicht mehr auftaucht?

yeti66

das sagt sich immer leicht, wenn man weiß, wovon man redet. Ich bin halt nen Anfänger.
Eigentlich wollte ich auf Tabellen verzichten - vor allem im Sinne von barrierefreiem Web.
Ich hab das aber über CSS nicht hingekriegt, weil ich mich damit fast gar nicht auskenne. Ich hab mich ein bisschen im Internet eingelesen und dann ausprobiert. Die meisten Seiten sind so kompliziert geschrieben, dass das ein Anfänger halt nicht checkt.
Also nützt mir der Rat "mach alles in CSS" nicht so viel, weil ich nicht weiß, wie ichs machen soll

Neuroleptika

Zitat von Lacrima

Es ein ganz normaler Fließtext - halt mit Informationen über die Schule. Hab die auch nur deswegen rausgenommen, weil die Seite eben noch off ist und mich ja nicht gleich jeder erkennen muss
Wenn es aber daran liegen sollte, was muss ich denn tun, damit der Fehler nicht mehr auftaucht?

Gucke es dir erstmal so in der Schule an wie du es uns gezeigt hast.
Mit deinem Mustertext passt es ja im IE6.
Dann stellst du den Zustand stückchenweise wieder so her bis der Fehler wieder auftaucht.
Ohne Testmöglichkeit ist das natürlich etwas nervig.

Zitat

Der andere IE, der die Titelzeile nach unten verschoben hat, hat die Version 8Beta.

Das ist halt noch Beta. Der neuste offizielle IE ist Vers.7.

yeti66

Ok, dann biete ich Dir an ,unter der Voraussetzung, das Du Dich mit dem Container-Layout beschäftigst, das Grundlayout zu basteln wenn Du mir die Bilder zukommen lässt. Ist das ein Angebot?;)

Lacrima

das klingt nach nem ziemlich netten angebot
Welche Bilder brauchst Du denn? Auch die Hintergrundbilder der Seite und der Buttons?
Ich les mich schon mal ein

yeti66

Ich würde sagen erst mal alles und dann sehen wir weiter was wir verwenden. Definiere möglichst genau was Du Dir vorstellst und in wieweit ich eigene Vorstellungen umsetzen kann und dann geht es los.

Lacrima

Also, ich hab das heute mal überprüft und in der Schule haben wir Version 7 des IE.
Und da fängt der Textblock mit dem Inhalt erst unterhalb der Menüleiste an.

yeti66: ich schreib dir mal ne PN

yeti66

yep, kümmere mich drum:)

Layout der Seite wird im IE falsch dargestellt

Tags

Benutzer online in diesem Thema