Markus: Probleme mit horizontalem Menü

SELF-Forum

Probleme mit horizontalem Menü

Markus
– Informationen zu den Bewertungsregeln

Servus,

ich hab grad ein sehr sehr hartnäckiges Problem, wo ich mittlerweile absolut am Ende meines Lateins bin:

Von einer Seite hab ich zwei Design-Versionen erstellt - jeweils mit einer externen CSS-Datei. Das horizontale Navigationsmenü mit Hintergrundgrafiken in der XHTML-Datei sieht folgendermassen aus

<!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">
<head>
<title>Designvorschlag 1/2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="design1bzw2.css" rel="stylesheet" type="text/css" />
</head>
<body>
[...]
  <div class="menu">
    <ul>
      <li><a href="#">E-Mail</a></li>
      <li><a href="#">Stellen</a></li>
      <li><a href="#">Anfahrt</a></li>
   <li class="luecke">&nbsp;</li>
      <li><a href="#">Profil</a></li>
      <li><a href="#">Projekte</a></li>
      <li class="menuaktiv">Kontakt</li>
      <li><a href="#">Login</a></li>
    </ul>
  </div>
[...]

Das Stylesheet für Variante 1 sieht folgendermassen aus:

/*Navigationsmenü Version 1*/
 .menu{
 background-color: #000000;
 height: 50px;
 width: 950px;
 clear: left;
 margin: auto;
 border-left:1px solid #ffffff;
 border-right:1px solid #999999;
 border-top:1px solid #404040;
 padding: 0 0 0 0 px;
}

.menu a {
 display: block;
 width: 70px;
 height: 25px;
 text-decoration: none;
 float: left;
 background: url(bilder/menutaste_off.gif) no-repeat top;
 margin: 0 0 0 0px;
 padding: 2px;
 color: #EBEBEB;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
 font-weight: bold;
    }
.menu a:hover {
 display: block;
 background: url(bilder/menutaste_on.gif) no-repeat top;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
 font-weight: bold;
 text-decoration: none;
 height: 25px;
 width: 70px;
 margin: 0 0 0 0px;
 padding: 2px;
 color: #000000;
    }

.menuaktiv {
 display: block;
 background: url(bilder/menutaste_on.gif) no-repeat top;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
 font-weight: bold;
 text-decoration: none;
 height: 25px;
 width: 70px;
 margin: 10px 0px 0 14px;
 padding: 2px;
 color: #000000;}

li {height: 25px;
 float: left;
 list-style-type: none;
 margin: 10px 0 0 10px;
 padding: 0px;
}
.luecke {width: 70px;
  margin: 10px;}

Das Stylesheet für Variante 2 lautet:

/*Navigationsmenü Version 2*/

.menu {
 background-color: #000000;
 height: 50px;
 width: 760px;
 clear: left;
 margin: auto;
 border-top:1px solid #404040;
 padding: 0 0 0 0 px;}

.menu a {
 display: block;
 width: 70px;
 height: 25px;
 text-decoration: none;
 float: left;
 margin: 0 0 0 0px;
 padding: 2px;
 color: #EBEBEB;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
 font-weight: bold;}

.menu a:hover {
 display: block;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
 font-weight: bold;
 text-decoration: underline;
 height: 25px;
 width: 70px;
 margin: 0 0 0 0px;
 padding: 2px;
 color: #cccccc;}

.menuaktiv {
 display: block;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
 font-weight: bold;
 text-decoration: underline;
 height: 25px;
 width: 70px;
 margin: 10px 0px 0 14px;
 padding: 2px;
 color: #cccccc;}

li {    height: 25px;
 float: left;
 list-style-type: none;
 margin: 10px 0 0 10px;
 padding: 0px;
}

.luecke {width: 70px;
  margin: 10px;}

Wo ist das Problem? Im Firefox nirgends - er zeigt die beiden Menüs jeweils an wie gewünscht - alle Punkte in einer Zeile schön nebeneinander. Im IE 6 unterscheiden sich die beiden Versionen jedoch ziemlich - Version eins wird angezeigt wie gewünscht, Version zwei ist weiterhin eine schnöde UL mit mit allen Punkten vertikal untereinander, Bullets, Standard-Farbe, Schrift usw.

Hat irgendwer eine Ahnung woran das liegen könnte? Ich kämpfe nun schon seit Stunden mit dem Problem - komm aber einfach nicht drauf. Vor allem, weil sich die beiden Versionen ja eigentlich im Aufbau praktisch nicht unterscheiden.

Wäre super, wenn mir jemand helfen könnte

Markus

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Probleme mit horizontalem Menü

    Jonny 5
    – Informationen zu den Bewertungsregeln

    Hat irgendwer eine Ahnung woran das liegen könnte? Ich kämpfe nun

    Hi Markus,

    hab eben mal probiert. Bei mir beide Layouts horizontal mit geringfügigen Unterschieden, im Mozilla, wie auch InetExplorer.

    Version zwei ist weiterhin eine schnöde UL mit mi...

    Seltsam, hört sich eigentlich an, als würde link zu stylesheet bzw dateiname nicht passen, wenn gar kein style aus v2 interpretiert wird.

    Probier mal im InetExplorer Cache leeren, Reload.

    lG,J5

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln