Hallo, wenn ich <!DOCTYPE html> in mein Projekt hinzufüge, wird das Layout meiner Navigation zerstört. Ohne <!DOCTYPE html> steht es wie gewünscht nebeneinander. Mit <!DOCTYPE html> dagegen werden die Listeneinträge untereinander angeführt und die CSS Anweisungen nicht beachtet.
Ich hoffe ihr könnt mir helfen
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body><div id="all">
<div id="Navigation">
<ul>
<li class="borderright navigationslink"><a href="" >A</a>
<li class="borderright navigationslink"><a href="" >B</a>
<li class="borderright navigationslink"><a href="" >C</a>
<li class="borderright navigationslink"><a href="" >D</a>
<li class="borderright navigationslink"><a href="">E</a>
<li class="borderright navigationslink"><a href="">F</a>
<li class="navigationslink"><a href="#kontakt">G</a>
</ul>
</div>
</div>
</body>
</html>
#all {
margin: -9px auto;
padding: 0;
width: 1094px;
background: white;
border-style: solid;
border-width: 1px 1px 1px 1px;
border-color: #3e3c3c;
}
#navigation {
width: 1094px;
position:fixed;
z-index: 10;
}
#navigation ul {
line-height: 48px;
margin: 0;
padding: 0;
}
#navigation li {
float: left;
position: relative;
list-style: none;
}
#navigation ul li a {
text-decoration: none;
text-align: center;
height: 48px;
width: 136px;
display: block;
font-family: verdana;
text-decoration: none;
color: white;
}
.borderright{
border-style: solid;
border-width: 0 1px 0 0;
border-color: black;
}
.navigationslink{
background:-moz-linear-gradient(bottom,#595656,#8d8b8b);
background:-webkit-gradient(linear,left top,left bottom,from(#595656),to(#8d8b8b));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b595656',endColorstr='#8d8b8b');
background-image: linear-gradient(#595656 0%, #8d8b8b 100%);
}