CSS sehr einfaches Menü macht Problem

[Gast]

Hi,

ich bastel grade ein Menü, was möglichst Browserkompatibel sein soll und sehr simpel umzusetzen. Eigentlich sollen es nur aus Bildern bestehen, die wenn man mit der Maus drüberfährt sich ändern. Funktioniert soweit, bloss bleibt ein roter Pixelstrich oben über beim hover. Muss ich noch was ändern?

Das css:

div.outer {
width: 50px;
height: 50px;
background: url(gif/menu.gif) 0 0 no-repeat;
}

div.outer a {
display: block;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
background: url(gif/menu.gif) 0 -50px no-repeat;
}

div.outer a:hover {
background-image: none;
}

Das html:

<div class="outer"><a href="link"></a></div>


Dies ist das 50x100px gif.
http://h4.abload.de/img/menutr9q.gif

[Nase]

Der rote Teil der Grafik ist 51px hoch, der blaue 49px.

[Gast]

Sowas dummes. Gut, kann man das menu so schreiben? Ich meine ist das css so ok, oder könnt es Probleme geben, ist es vielleicht eine blöde Vorgehensweise?

[Nase]

Ich würde nur dem Link einen background geben und dann bei :hover den background nach oben schieben. Und schon ist das gängige Praxis.