nicht angemeldet
Bitte um Hilfe: Darstellungsfehler bei einzelnen Browsern
Gunnar BittersmannHallo allerseits,
ich eine von mir erstellte Webseite auf browsershots.org testen lassen. 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.
Richtige Darstellung: http://img90.imageshack.us/img90/3550/richtiggk9.jpg
Falsche Darstellung: http://img90.imageshack.us/img90/7929/falschxy5.jpg
Hier der betreffende Code:
------------------------------------------------
* { margin: 0 auto; padding: 0 }
body {
background: url('images/design/bg2.jpg') top center no-repeat #fffff7;
font: normal 80% "Trebuchet MS", Arial, Georgia, sans-serif; }
#site { width: 900px; }
#nav {
width: 898px;
background: url('images/design/navbg.jpg');
float: left;
margin: 0 auto; }
#nav ul { width: 784px; list-style-type: none; padding-left: 103px; margin: 0 auto; font-weight: bold; font-size: 0.9em; }
#nav li { float: left; }
#nav a { width: 114px; height: 28px; color: #afafaf; text-decoration: none; float: left; text-align: center; display: block; padding-top: 12px;}
#active a { color: #ffffff; }
#nav a:hover { color: #ffffff; }
#nav li.one a:hover { background: url('images/design/nav_a1.jpg') no-repeat; }
#nav li.two a:hover { background: url('images/design/nav_a2.jpg') no-repeat; }
#nav li.three a:hover { background: url('images/design/nav_a3.jpg') no-repeat; }
#nav li.four a:hover { background: url('images/design/nav_a4.jpg') no-repeat; }
#nav li.five a:hover { background: url('images/design/nav_a5.jpg') no-repeat; }
#nav li.six a:hover { background: url('images/design/nav_a6.jpg') no-repeat; }
#header {
width: 828px;
height: 98px;
background: url('images/design/header.jpg');
padding: 0px 0px 0px 42px;
float: left;
margin: 0 auto; }
...
------------------------------------------------
------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="Content-Language" content="de" />
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<title>Obst, Gemüse & Oliven | Lebensart Naturkost</title>
</head>
<body>
<div id="site">
<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">Ü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>
<div id="header"></div>
...
------------------------------------------------
Ich wäre sehr froh, wenn mir jemand einen Tipp geben könnte, wie dieser Darstellungsfehler zu beheben ist.
mfg amlug
-
@@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üse & Oliven | Lebensart Naturkost</title>
--8<--
<li class="three"><a href="laden.html">Ü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">Ü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)-
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?
Ging mir vor allem um den IE, aber vermutlich hast du recht, der ist ja erst noch eine Beta.
Danke für die Codekorrektur. (Die Seite war allerdings vom W3C-Validator angenommen wurden.) Das mit den Umlauten werde ich auch beachten, da dachte ich bisher immer, es wäre gerade das empfehlenswerte wäre. Na ja, ich bin noch relativer Anfänger.
Den div="site" habe ich eingefügt, weil das sonst mit dem Zentrieren der nachfolgenden divs nicht geklappt hat. Wobei die Bezeichnung reichlich unsinnig ist, da hast du recht, und relativ peinlich, eigentlich kann ich ja recht gut Englisch...
Den einzelnen Elementen der Navigationsliste musste ich Bezeichnungen zuordnen, weil je ein eigener Hintergrund für einen hover-Effekt benötigt wurde. Dass ich dabei den Sinn der id/class-Funktion missachtet habe, tut mir leid (Anfänger, wie gesagt), ich werde deinen Rat beachten, auch die 10 Richtlinien werde ich versuchen mir zu Herzen zu nehmen. Ich werde probieren, ob ich die Seite so einfach auf variable Breiten umbauen kann, wenn mir was einfällt, damit das auch mit dem zentralen Bild hinhaut.
Vielen Dank. Kapla!
amlug-
@@amlug:
Danke für die Codekorrektur. (Die Seite war allerdings vom W3C-Validator angenommen wurden.)
Dessen Aufgabe ist es, Syntaxfehler zu finden. Ein solcher lag nicht vor.
Manche Validatoren erkennen darüber hinaus andere Ungereimtheiten. Der CSS-Validator bspw. warnt, wennn eine Textfarbe gesetzt wird, aber keine Hintergrundfarbe.
Ein XHTML-Validator könnte eine Warnung (keine Fehlermeldung!) ausgeben, wenn @lang ohne @xml:lang oder @xml:lang ohne @lang verwendet wird. Der Validator vom W3C tut dies nicht, das ist aber – wie gesagt – auch nicht seine Aufgabe.
Vielen Dank. Kapla!
BTW, es gibt im Klingonischen kein K. „Zum Beispiel wird das klingonische Phonem tlh zu Beginn eines Wortes im deutschen Notationssystem oft kl geschrieben, weil der Laut tl nicht zu Beginn eines deutschen Wortes erscheinen kann. Ähnlich verhält es sich mit dem klingonischen Q, das lautlich oft mit kr umschrieben wird, während das q meistens zu k wird.“ [Orkrand] Beispiele: qeylIS (Kahless), Qo'noS (Kronos), thlIngan (Klingone, klinonisch).
Qapla'
Gunnar[Orkrand] Marc Orkand, Das offizielle Wörterbuch Klingonisch/Deutsch – Deusch/Klingonisch, HEEL Verlag Königswinter
--
Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)-
Nochmal danke. Wieder was gelernt. Das Wörterbuch werd ich mir vielleicht mal zulegen.
Qapla’
amlug
-
-
-