nicht angemeldet
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"> </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