Liste ist nicht links oben sondern verschoben

[FireFreak]

HTML:

        <div id="main">
            <div id="navigation">
                <ul>
                    <li><a href="main.php?site=main"><img src="http://www.html.de/images/home.png" alt="Home" />   Startseite</a></li>
                    <li><a href="main.php?site=verwaltung"><img src="http://www.html.de/images/teamspeak.png" alt="Teamspeak" />   Verwaltung</a></li>
                    <li><a href="main.php?site=einstellungen"><img src="http://www.html.de/images/settings.png" alt="Settings" />   Einstellungen</a></li>
                    <li><a href="logout.php"><img src="http://www.html.de/images/icon_logout.png" alt="Logout" />   Logout</a></li>
                </ul>
            </div>
            <div id="content">
                <p>Trololololo.</p>
            </div>
        </div>

CSS:

#navigation li {
    list-style: none;
}


#navigation a:link, #navigation a:visited {
    text-decoration: none;
    color: #03ABFF;
}


#navigation li a{
    display: block;
    width: 130px;
    height: 35px;
    line-height: 35px;
    padding-left: 15px;
    border-bottom: 1px solid #ADADAD;
    color: #03ABFF;
}


#navigation {
    background-color: black;
}


#navigation li a:hover {
    background-color: #525252;
}

Ergebnis:

Die Liste ist nicht ganz am Rand der weißen div(content), wieso und wie kann man das beheben? Ich habe ja keinerlei Außenränder gesetzt :/

 

[Tronjer]

Weil Listenelemente by default eingerückt werden. Das musst du wieder aufheben.

#navigation ul {
         list-style: none;
         margin: 0;
         padding: 0; 
}

 

[threadi]

Das dürften die Standardabstände vom <ul> sein. Jedes Element hat bestimmte vorgegebene Eigenschaften, die man natürlich auch zurücksetzen kann.

ul { margin: 0; }

 

[FireFreak]

Tausend Dank, hat funktioniert