Anfänger hat ein Problem! a verschiebt sich in ul

    Hallo Leute, bin noch ein ziemlicher Anfänger was HTML/CSS angeht, also alles was kommt hab ich mir in den letzten Tagen selbst beigebracht.
    Ich bin derzeit dabei mir eine kleine Portfolioseite für meine Fotos aufzubauen.
    Irgendwie verschieben sich aber meine Linkelemente mit meinem a:hover um ein Stück.
    Ich lade die Seite einfach mal auf meine Dropbox (Bilder laden ein wenig langsam) und dann könnt ihrs euch vielleicht mal anschauen.
    Den Code hänge ich euch hier an.
    Würde mich sehr freuen wenn mir jemand helfen würde!

    Seite: https://dl.dropbox.com/u/24466946/Test/index.html

    Code:


    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    html {background: #000000;}

    #bg {
    position:fixed;
    top:-50%;
    left:-50%;
    width:200%;
    height:200%;
    z-index: -9999;
    }
    #bg img {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
    min-width:50%;
    min-height:50%;
    }

    #contentbg {
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-360px;
    margin-left:-640px;
    }

    ul.top {
    position:absolute;
    top:0;
    left:0;
    }

    a {
    position:relative;
    display:block;
    width: 640px;
    height: 360px;
    }

    a.blog:hover {
    background-image:url(Images/indexslice01.jpg);
    }

    a.commercial:hover {
    background-image:url(Images/indexslice03.jpg);
    }


    </style>


    </head>

    <body>

    <div id="bg">
    <img src="Images/BG.jpg">
    </div>

    <div id="contentbg">
    <img src="Images/index_bg.jpg">
    <ul class="top">
    <li><a href="x" class="blog"></a></li>
    <li><a href="x" class="commercial"></a></li>
    </ul>


    </div>


    </body>
    </html>

    Wow Danke für die schnelle Antwort!
    Das hat auf jeden Fall schon mal den Abstand nach links korrigiert,
    nach oben haben die einzelnen Elemente aber immernoch einen Abstand.
    Woran könnte das liegen?

    Nimm noch den Außenabstand nach oben von deiner Liste.

    ul.top {
    position:absolute;
    top:0;
    left:0;
    padding:0;
    margin-top:0px;
    }

    und falls deine Liste gar keine Abstände nach außen braucht:

    ul.top {
    position:absolute;
    top:0;
    left:0;
    padding:0;
    margin:0;
    }

    Ich empfehle für die Fehlersuche das Addon Firebug für Firefox und im IE die Entwicklertools, die mit F12 zu erreichen sind. Damit kannst du selbst sehen wie die Abstände zustande kommen.

    Viele Grüße,
    CroWeHaMmeR

    Danke!
    Ich bin jetzt durch und es haben sich noch ein paar kleine Probleme ergeben. FF stellt soweit alles richtig dar, allerdings sind in Chrome und Safari die per hover eingeblendeten Bilder alle um ca. 10px nach unten verschoben. Außerdem sind in FF wenn ich per Brwoser von einer Unterseite zurück navigiere die besuchten Links mit einer gepunkteten Linie versehen, obwohl folgendes im Code habe:


    a:visited {
    border-style:none
    border:none;
    text-decoration:none;
    }

    Außerdem, was mich am aller meisten verwundert, ist das auf meinem normalen Hintergrund img aufeinmal ein schwarzer Punkt ist, der auf den Bilddateien auf meiner Platte nicht sichtbar ist, sondern erst im Browser da ist. Kennt das jemand?

    Danke nochmal!!!

    Ich hab das mit dem text-decoration:none schon ausprobiert, das funktioniert zwar wenn ich über die Links auf den Unterseiten zurück navigier, wenn ich aber die Normalen zurück Buttons im FF benutz kommt eben wieder die gepunktete Linie. Ich habs nochmal hochgeladen, ist jetzt nur ein anderer Link. Danke schonmal crowe! Stell dir ein online Bier ausgegeben vor :)

    http://dl.dropbox.com/u/24466946/Test/index.html