Linki z obrazkami na mapie Opcje

[Zellus]

Witam,

Piszę(właściwie to już prawie napisałem, ale pozostała mi 1 kwestia której za nic nie mogę rozwiazać) stronę internetową, m.in. ma się na niej znajdować mapa, i jak kliknie się na dane miasto to przenosi na odpowiednią podstronę. Zależy mi na tym żeby po najechaniu na dane miejsce obrazek się trochę rozjaśniał(pzygotowałem 3 obrazki, osobny dla a/a:visited, a:hover i a:focus etc.). Jednak jest 1 problem, znaczący. Tło pod obrazkiem jest przesunięte w dół przez co ucięte i nieładnie wygląda(http://img208.imageshack.us/img208/4434/70673991.png) Tą ramkę zostawiłem bo wtedy lepiej widać w czym problem. Podam jeszcze "kod" i może komuś uda się znaleźć moment w którym się pomyliłem:
HTML:

[HTML] pobierz, plaintext 
 
        <div id="mapa"> 
                <div id="poznan"> <a href="poznan.html"><img src="blank.png" width="47px" height="35px"/></a></div>
                <div id="lodz"> <a href="lodz.html"><img src="blank.png" width="62px" height="29px"/></a></div>
                <div id="wroclaw"> <a href="wroclaw.html"><img src="blank" width="67px" height="28px"/></a></div>
        </div>
 
[HTML] pobierz, plaintext 

CSS:

[HTML] pobierz, plaintext 
#poznan{
        margin:40px 0px 0px 45px;
        padding:0px;
        border:0px;
}
 
#poznan a, #poznan a:visited{
        background: url('mapy/Poznan_3.png');
        width:47px;
        height:45px;
        margin:0px;
        padding:0px;
}
 
#poznan a:active, #poznan a:hover{
        background: url('mapy/Poznan_2.png');
}
 
 
#poznan a:focus{
        background: url('mapy/Poznan_1.png');
}
 
#lodz{
        margin:0px 0px 0px 65px;
        padding:0px;
        border:0px;
}
 
#lodz a, #lodz a:visited{
        background: url('mapy/lodz_3.png');
        width:62px;
        height:29px;
        margin:0px;
        padding:0px;
}
 
#lodz a:active, #lodz a:hover{
        background: url('mapy/lodz_2.png');
}
 
 
#lodz a:focus{
        background: url('mapy/lodz_1.png');
}
 
#wroclaw{
        margin:0px 0px 0px 45px;
        padding:0px;
        border:0px;
}
 
#wroclaw a, #wroclaw a:visited{
        background: url('mapy/wroclaw_3.png');
        background-position:top;
        width:67px;
        height:28px;
        margin:0px;
        padding:0px;
}
 
#wroclaw a:active, #wroclaw a:hover{
        background: url('mapy/wroclaw_2.png');
}
 
 
#wroclaw a:focus{
        background: url('mapy/wroclaw_1.png');
}
 
#mapa img{
        border:0px;
        padding:0px;
        margin:0px;
}
 
#mapa{
        background: url('mapy/mapa_tlo.png');
        height:200px;
        width:200px;
        display:inline;
        float:left;
}
 
[HTML] pobierz, plaintext 

Jak widać jest tam parę kawałków które miały zaradzić problemowi ale nie zadziałały :/
Sprawdzałem też ten kawałek w "laboratoryjnych" warunkach, czyt. z wyciętą z pliku resztą strony, niestety rezultat ten sam

Z góry dziękuję za pomoc i pozdrawiam,
Zellus