Seltsamerweise bin ich noch nie auf dieses Problem gestoßen, aber ich habe gerade angefangen, eine Website zu erstellen, und die obere Navigation funktioniert nicht richtig.
Ich möchte einen kleinen Leerraum zwischen den einzelnen Menüpunkten haben, aber wenn ich neue Zeilen zwischen meinen <li> Elemente und meine <a> Elemente in meiner IDE (Netbeans), verschwindet der Leerraum, aber es sieht gut aus, wenn ich die <li><a></a></li> alle auf der gleichen Linie. Ich hatte immer den Eindruck, dass HTML Leerraum im Code ignoriert.
Ich habe nach seltsamen Zeichen gesucht, die in anderen Texteditoren Probleme verursachen, und konnte nichts finden.
Hier ist der Code...
So sieht das Menü korrekt aus, aber der Code sieht hässlich aus (ich weiß, es sieht gut aus, wenn es so einfach ist, aber ich werde mehr Komplexität hinzufügen, was es in einer Zeile schrecklich aussehen lässt):
<ul id="menu">
<li><a href="#">About</a></li>
<li class="active"><a href="<?php echo site_url("tracklist"); ?>">Track List</a></li>
<li><a href="<?php echo site_url("stats"); ?>">Stats</a></li>
<li><a href="#">Stats</a></li>
</ul>Produziert: 
So sieht das Menü falsch aus, aber der Code ist in Ordnung:
<ul id="menu">
<li>
<a href="#">About</a>
</li>
<li class="active">
<a href="<?php echo site_url("tracklist"); ?>">Track List</a>
</li>
<li>
<a href="<?php echo site_url("stats"); ?>">Stats</a>
</li>
<li>
<a href="#">Stats</a>
</li>
</ul>Produziert: wrong http://img708.imageshack.us/img708/6628/screenshot20100618at000.png
Ich bin sicher, es ist etwas Einfaches, was ich falsch mache... aber kann mir jemand etwas Licht in die Sache bringen?
Entschuldigung für den langatmigen Beitrag (mein erster auf Stackoverflow).
Bearbeiten - Vollständiges CSS und HTML:
body {
/* font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; */
font-family: 'Trebuchet MS', Helvetica, sans-serif;
/* font-family: 'Copperplate', 'Copperplate Gothic Light', sans-serif; */
}
a {
color: #FFFFFF;
text-decoration: none;
}
#container{
margin: 0 auto;
width: 800px;
}
#content {
margin-top: 50px;
}
#header {
background-image: url("../images/absolute_radio_logo.png");
border-bottom: solid 1px #777777;
background-repeat: no-repeat;
width: 800px;
height: 86px;
padding-bottom: 15px;
}
#menu {
float: right;
}
#menu li {
display: inline;
padding: 5px;
background-color: #932996;
border-bottom: solid 1px #932996;
}
#menu li:hover {
border-bottom: solid 3px #FF0000;
}
#menu li.active {
background-color: #58065e;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<title>Radio - Statistics</title>
<link rel="stylesheet" type="text/css" href="http://localhost/resources/css/style.css" />
</head>
<body>
<div id="container">
<div id="header">
<ul id="menu">
<li>
<a href="#">About</a>
</li>
<li class="active">
<a href="http://localhost/tracklist">Track List</a>
</li>
<li>
<a href="http://localhost/stats">Stats</a>
</li>
<li>
<a href="#">Stats</a>
</li>
</ul>
</div>
<div id="content">
<!-- content -->
Elapsed Time: 0.0033 - Memory Used: 0.4MB
</div>
</div>
</body>
</html>
