Hallo 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