Gunnar Bittersmann: Bitte um Hilfe: Darstellungsfehler bei einzelnen Browsern

Beitrag lesen

@@amlug:

Dabei trat ein Darstellungsfehler im Menü der Seite (#nav) bei folgenden Browsern unter Win XP auf: Opera 7.54 und 8.54, Navigator 8.1.3, Internet Explorer 8.0.

Da kann ich dir nicht helfen. Ist vermutlich auch gar nicht nötig, denn: Was interessieren dich veraltete Browser oder vorläufige Beta-Versionen künftiger Browser?

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">

Sprachangaben in XHTML 1.0, wenn es als 'text/html' ausgeliefert wird, immer mit 'lang'- und 'xml:lang'-Attributen. [XHTML1 §C.7, LANGUAGE-DECL, I18N-HTML-TECH-LANG, http://de.selfhtml.org/html/xhtml/unterschiede.htm#lang@title=SELFHTML]

Also:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<title>Obst, Gem&uuml;se &amp; Oliven | Lebensart Naturkost</title>
--8<--
<li class="three"><a href="laden.html">&Uuml;ber uns</a></li>

Warum nicht richtige Üs? „Es ist fast immer besser, eine Zeichencodierung zu benutzen, die es erlaubt, die Zeichen in ihrer normalen Form zu verwenden, anstatt Zeichen-Entity-Referenzen oder numerische Zeichenreferenzen zu verwenden.“ [QA-ESCAPES]

<div id="site">

Der Sinn dieses 'div' ist welcher? Mit 'html' und 'body' stehen dir zwei alles andere beinhaltende Elemente zur Verfügung, die du stylen kannst.

Und "site" als Bezeichner verstehe ich auch nicht. Den Unterschied zwischen Website und Webseite kennt du?

#site { width: 900px; }

Das allerdings solltest du nochmal überdenken. Feste Breiten in Pixel sind pfui! Nutzer mit schmaleren Viewport müssen horizontal scrollen – das ist alles andere als nutzerfreundlich.

<div id="nav">
                <ul>
                        <li class="one"><a href="index.html">Startseite</a></li>
                        <li class="two"><a href="aktuelles.html">Aktuelles</a></li>
                        <li class="three"><a href="laden.html">&Uuml;ber uns</a></li>
                        <li class="four" id="active"><a href="angebot.html">Unser Angebot</a></li>
                        <li class="five"><a href="imkerei.html">Imkerei</a></li>
                        <li class="six"><a href="anfahrt.html">Anfahrt</a></li>
                </ul>
        </div>

Die Klassenbezeichener "one", "two", …, "six" sind unsinnig. Zum einen möchtest du hier nicht klassifizieren, sondern identifizieren, d.h. jedem Menüpunkt einen eindeutigen Bezeichner geben, also eine ID.

Zum anderen ist die Durchnumerierung bereits durch die Verwendung einer Liste gegeben. (Vielleicht möchtest du eine geordnete Liste 'ol' einsetzen?) Und was, wenn ein Menüpunkt wegfällt oder ein neuer hinzukommt? Wird dann alles wieder umbenannt? Verwende als Bezeichner die Funktion!

Außerdem: „Verlinke niemals auf die aktuelle Seite.“ (Punkt 10 der zehn meist-missachteten Homepage-Design-Richtlinien [Nielsen]) Dann brauchst du auch "active nicht"; die Selektoren '#nav li' und '#nav li a' genügen.

Das Markup der Navigationsliste könnte so aussehen:

        <div id="nav">  
                <ol>  
                        <li id="nav-start"><a href="index.html">Startseite</a></li>  
                        <li id="nav-aktuelles"><a href="aktuelles.html">Aktuelles</a></li>  
                        <li id="nav-about"><a href="laden.html">Über uns</a></li>  
                        <li id="nav-angebot">Unser Angebot</li>  
                        <li id="nav-imkerei"><a href="imkerei.html">Imkerei</a></li>  
                        <li id="nav-anfahrt"><a href="anfahrt.html">Anfahrt</a></li>  
                </ol>  
        </div>

Live long and prosper,
Gunnar

--
Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)