✔ Gleiche Code - unterschiedliche Darstellung

Status
Nicht offen für weitere Antworten.
modstyle

modstyle

Mitglied
Hi!

Nein, in diesem Thread will ich mich nicht darüber ausweinen, dass der IE etwas anders darstellt als der Firefox - nur so zur Info vorweg ;).

Unter AUTOHAUS HORNUNG - PEUGEOT Service-Vertragspartner mit Vermittlungsrecht habe ich eine Website hochgeladen, an der ich zur Zeit arbeite. Wenn man die Website aufruft, sieht man unter dem "Kopf-Bereich" (Text auf hellblauem Hintergrund und rechts daneben Foto) das Hauptmenü (dunkelblauer Balken). Dieses Hauptmenü hat zum Kopf mehrere Pixel Abstand (was eigentlich nicht so sein soll).

Wenn ihr nun auf den Punkt "Service" klickt taucht unter dem Hauptmenü ein hellblauer Balken mit dem Sub-Menü auf ;). Mit einem Klick auf "Lackiererei", "Werkstatt" oder "Zubehör" gelangt ihr zur jeweiligen Seite und werdet sehen, dass der Abstand von Kopf zu Hauptmenü plötzlich auf einen Pixel (so soll es sein!) geschrumpft ist! Klickt ihr dann auf den vierten Sub-Menü-Punkt "Accessoires" zeigt auch diese Seit - wie alle anderen auch - den zu großen Abstand.

Nun habe ich lange nach dem Fehler gesucht und versucht alles auszuschließen und kommen einfach nicht weiter. Entweder bin ich zu dumm oder einfach zu blind geworden - oder beides!
Auf jeden Fall halte ich den Vergleich zwischen den Seiten "Service" und "Werkstatt" für am sinnvollsten, da die exakt die gleichen DIV-Container mit den gleichen Einstellungen enthalten (bei den anderen Seiten variiert das etwas).

Kann mich bitte jemand von dieser Qual erlösen!?
Danke für die Hilfe!
 
Hi!

Wie gesagt: Ich arbeite daran. Und an zwei Sonderzeichen wird es denke ich kaum scheitern oder gibt es da etwas, dass ich nicht weiss?

Zum "Content-Type"-Header-Feld steht in der Datei:
Code: 
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

Edit:
Habe gerade gesehen, dass ich die meta-Tags nicht konform geschrieben habe (habe zum Schließen einfach nur ">" anstatt "/>" verwendet).
Ändert aber nichts am obigen Problem.

Edit2:
Achja: Result for http://www.peugeot-hornung.de/test/ - W3C Markup Validator
 
Zuletzt bearbeitet:
Wie du an dem Validator-Ergebnis siehst, wird das Dokument aufgrund der fehlenden Header-Feld-Angabe als UTF-8-kodiert behandelt, da dies die Standardzeichenkodierung eines XHTML-Dokuments ist.
 
Der IE reagiert auf Leerzeichen / Zeilenumbrüche im HTML-Quelltext vor und/oder nach dem img-Element mit Verschiebungen im Layout.

Beispiel:
HTML: 
<!-- aus -->

<div id="kopf">
<img src="gfx/titel_logo.gif" alt="Logo Peugeot und Schriftzug Autohaus Hornung Service-Vertragspartner mit Vermittlungsrecht" />
</div>

<!-- wird -->

<div id="kopf"><img src="gfx/titel_logo.gif" alt="Logo Peugeot und Schriftzug Autohaus Hornung Service-Vertragspartner mit Vermittlungsrecht" /></div>
Keine Sorge, du mußt jetzt nicht alle Dokumente öffnen und die entsprechenden Zeilen korrigieren ;)

Denn anstelle dieser Methodik lässt sich das Darstellungsproblem auch mit CSS beheben, indem die Grafiken die display:block-Eigenschaft erhalten:

Code: 
img {
        display: block;
}
Der zu große Abstand des Hauptmenüs zum DIV #einleitung lässt sich mit folgender CSS-Regel verringern:

Code: 
#einleitung {
        margin: 0px;
        margin-bottom: 1px !important; /* Für nicht-IE-Browser */
        margin-bottom: -2px; /* Für IE */
        padding: 0px;
        border: 0px;
        width: 780px;
        height: 150px;
}
 
Der W3C-Validator ist was XHTML-Dokumente betrifft leider nicht so gut wie andere (siehe XML-Einschränkungen). Das liegt unter anderem daran, dass es nur ein modifizierter SGML-Parser und kein richtiger XML-Parser ist. Siehe dazu auch „XHTML und Schema-Validierung“ von Mathias Schäfer.

Ein kleines Beispiel zur Verdeutlichung:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title/></head>
<body/>
</html>
Das title- und das body-Element als leeres Element zu deklarieren, ist völliger Mist. Der W3C-Validator hat jedoch nichts dagegen und erklärt es als valide.


Beschäftige dich lieber mal ausgiebig mit XHTML bevor du es einsetzt. Denn die Unterschiede zwischen HTML und XHTML sind weit mehr als unterschiedliche Dokumenttypdeklarationen und Schrägstriche am Ende des Start-Tags eines leeren Elements.
 
Hallo!

Sind die "kleinigkeiten" denn so wichtig?
Schaue Dir die Seite mal lieber erstmal in verschiedenen Browsern an.....

IE 5.5: das Bild ist nicht neben dem hellblauen Element mit dem Text, sondern da unter.
Wiederum unter dem Bild wird der Text aus Deinem <div id="einleitungstext"> angezeigt (also das was schon im hellblauen Element steht), obwohl dieses DIV-Element der Kommentarzeile nach (<!-- Einleitungstext als nicht sichtbares DIV, da Text als Grafik eingefügt -->) ja nicht sichtbar sein soll. :eek:

Netscape 7.1: unter dem Kopf ist ein ca. 5mm grosser Zwischenraum.

Opera 7.54: gleiches wie bei Netscape, nur zusätzlich auch ein ebenfalls ca. 5mm grosser Zwischenraum über dem Hauptmenü.

Kleinere Darstellungsprobleme habe ich jetzt mal aussenvor gelassen.

Gruss Dr Dau
 
Hi!

Habe das Problem nun gefunden. Es lag daran, dass sobald ein Text im Container "einleitungstext" mehr als eine Zeile lang war - also umbrochen werden musste - zu dem vergrößerten Abstand führte.
Nachdem ich nun die font-size auf 0 gesetzt habe, funktioniert es (auch wenn es keine schöne Lösung ist, wenn jemand was Anderes weiss bitte melden). Außerdem habe ich die Option "visibility: hidden;" verwendet, so dass auch in anderen Browsern (außer Firefox und IE) die Box nicht mehr sichtbar sein dürfte.

Leider konnte ich das bei mir nur unter Firefox 1.5.0.4, Mozilla 1.7.2, IE 6 und Safari 2.0.1 testen. Gibt es vielleicht Möglichkeiten den IE 5 neben dem IE 6 zu installieren oder irgendwelche kostenlosen Webservices, bei denen man Screenshots bekommt?
Habe IE 5 runtergeladen, hat aber die Installtion verweigert, da eine neuere Version installiert ist.
Wie es zu dem beschriebenen Darstellungsproblem im IE 5 mit den untereinanderliegenden Bildern kommt, kann ich mir nicht erklären, da diese die Eigenschaften "display: block;" und "float: left;" haben. Der umrahmende DIV-Container hat "padding: 0px;". Die anderen Probleme sollten behoben sein.

P.S.: Danke an Gumbo für die interessanten Artikel zum Thema XHTML, es hat meine Birne auf jeden Fall heller gemacht ;).
Habe meinen Code auch nochmal durch die anderen beiden Validatoren gejagt, die in dem Artikel empfohlen werden und nun ist alles stimmig.
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück