Link in Listen-Element unten ausrichten

[Bourbon]

Hallo Leute,

folgendes Problem gibt es:
Ich bastel gerade etwas rum und haben mir einen am unteren Bildschirmrand ausgerichteten Footer erstellt.
Darin ist ein Menü in Form einer waagerechten Liste.
Klappt alles wunderbar.
Jetzt sollen über die einzelnen Menüpunkt Icons.
Das Einbinden der Bilder ist nicht das Problem, eher dass der Link unten ausgerichtet ist. Das klappt irgendwie nicht, auch nicht mit vertical-align.

Hier erstmal der Code aus dem frontend.php

<footer>
    <ul id='footerleiste'>
        <li id="aktuelles"><a href="#" title="Aktuelles">Aktuelles</a></li>
        <li><a href="#" title="Gruppen">Gruppen</a></li>
        <li id="kontakte"><a href="#" title="Kontakte">Kontakte</a></li>
        <li><a href="#" title="Einstellungen">Einstellungen</a></li>
    </ul>
</footer>

Und das steht in der CSS-Datei:

footer {
    position: absolute;
    bottom: 0;
    width: 100%;
}

#footerleiste {
    text-align: center;
    padding: 0;
    margin-bottom: 0px;
}

#footerleiste li {
    display: inline-block;
    list-style-type: none;
    text-align: center;
    width: 65px;
    font-size: 8pt;
    margin: 0;
    color: black;
    height: 40px;
}

#footerleiste li a {
    display: block;
    font-color: #000000;
    vertical-align: bottom;
    height: 40px;
}

#kontakte {
    background: url(https://cdn3.iconfinder.com/data/icons/communication-icons-3/512/Newspaper-128.png) no-repeat;
    background-size: 50%;
    background-position: top;
}

Was muss ich ändern, damit es geht?

 

[pax]

Versuchs mal mit einer line-height für das a, 40px sollten es vertikal zentrieren, spiel ein bisschen herum.

vertical-align hat an der Stelle nichts zu suchen. Genaueres hier: http://phrogz.net/css/vertical-align/

 

[Bourbon]

Hey, das funktioniert einwandfrei und vielen Dank für den Link!
Einer Frage hätte ich da noch, weil auch Google mich hier nicht im Ansatz weitergebracht hat.

Chrome überschreibt in manchen Punkten meine Formatierung mit dem eigenen User Agent Stylesheet, so dass bspw. Links, egal was ich eingebe, immer unterstrichen und blau sind. Wie kann ich das verhindern?

 

[Xeno]

Lieber Bourbon

Hast Du einen Link zur Seite? Vielleicht ist irgendetwas nicht konform.

Lg X.

 

[xyz123]

Also Deine eigenen CSS überschreiben IMMER die Definitionen des Browsers - wenn nicht, hast Du da irgendwo einen Fehler (Schreibfehler, Semikolon vergessen oder so).

Außerdem würe ich in Deinem Fall lieber ein "padding-top XXXpx" nutzen - mit line-height erhöht sich ja der "Abstand" nach oben und unten