Slide: Bilder-Link mit Hover-Effekt (CSS-Problem)

Beitrag lesen

Hallo,
ich wollte die Textlinks meines Seitenmenüs gegen Bilder-Links mit Hover-Effekt tauschen.
Als beste methode schien mir folgende:

Ich habe in meiner externen CSS-datei definiert:

a.news{height: 18px; width: 150px; border-width: 0;}
a.news img {background: url(http://beta.vega-server.de/pics/menu/news.gif) top left no-repeat;}
a.news:hover img {background: url(http://beta.vega-server.de/pics/menu/news_select.gif) top left no-repeat;}

Auf meiner Hauptseite habe ich dann :
<a class="news" href="index.php"><img src="pics/blank.gif" alt="News"></a>

Soweit, sogut. Ich habe einen Grafik-Button der beim hovern sein Bild ändert.

Nun die Probleme:

1. Ich will(muss) den Button ganz links oben in einem div platzieren.(Wer die HP anschaut, weis wie es dann aussehen soll), aber ich habe einen Abstand von ca. 3-4px nach links und nach oben.
Auch mit margin und padding überall auf 0 gesetzt, habe ich diesen Abstand. Wie bekomme ich den weg?

2. Obwohl ich in der css-klasse "border-width: 0;" definiert habe, habe ich einen Rahmen um den Button. Er verhällt sich wie meine allgemeine definition von <a>, die ich für alle anderen Links auch beibehalten möchte:

a:link {text-decoration: none; color : #0a3c64;}
a:visited {text-decoration: none; color : #0a3c64;}
a:active {text-decoration: none; color : #0a3c64;}
a:hover {text-decoration: underline; color : #DD6900;}

Aber wiso tut er dass. Bindet die Klasse nicht mehr als die allgemeine Definition? Und, wie bekomme ich diesen Rahmen weg?

Die Seite mit dem Problem könnt ihr unter http://beta.vega-server.de anschauen.

Danke schonmal im Voraus,
Slide