Hallo leute,
ich habe ein problem was mich an den rand des wahnsinns treibt.
Im Firefox wird das horizontale menü im header bereich der Website falsch dargestellt, ich weiß aber nicht wieso?!
Im IE funktioniert es wunderbar.
Das komische an der sache is, das es im Firefox schon einmal richtig funktioniert hat, aber dann plötzlich nicht mehr?!
Ich hoffe ihr könnt mir weiterhelfen
Hier der Quelltext:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<!--<link rel="stylesheet" href="style.css" type="text/css" title="Standard" media="screen, projection">-->
<style type="text/css">
body
{
margin: 10px 0 20px 0;
padding: 0;
font: 85% arial, hevetica, sans-serif;
text-align: center;
color: #505367;
background-color: #D6D6D6;
}
#container
{
margin: 0em auto;
width: 800px;
text-align: left;
background-color: red;
border: 1px solid #717171;
}
#header
{
margin: 0;
padding: 0px;
width: 800px;
height: 127px;
background-color: fuchsia;
background-image: url('bilder/header.gif');
background-position: top-right;
background-repeat: repeat-y;
border-bottom: 1px solid #717171;
}
#contents
{
margin: 0em;
padding: 0em;
width: 800px;
height: 100px;
background-color: white;
}
#footer
{
margin: 0;
width: 800px;
height: 30px;
background-color: white;
border-top: 1px dashed #717171;
}
<!-- Standart Navi -->
#navcontainer ul
{
padding-left: 0;
margin-left: 0;
margin-top: 99px;
background-color: #93b9d9;
color: #000;
float: right;
border-top: 1px solid #717171;
font-family: arial, helvetica, sans-serif;
}
*html #navcontainer ul
{
margin-top: 100px;
}
#navcontainer ul li { display: inline; }
#navcontainer ul li a
{
padding: 0.4em 1em 0.4em;
background-color: #93b9d9;
color: #000;
text-decoration: none;
float: left;
border-left: 1px solid #717171;
}
#navcontainer ul li a:hover
{
background-color: #65859f;
color: #fff;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="navcontainer">
<ul>
<li><a href="#">Startseite</a></li>
<li><a href="#">Über Uns</a></li>
<li><a href="#">Dienstleistung</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</div>
</div>
<div id="contents"></div>
<div id="footer">footer</div>
</div>
</body>
</html>