Obcięte tło obrazkowe pod odnośkiem

Wiem że HTML to nie programowanie, ale osoby które znają się na PHP powinny znać się również na tym więc myślę że to nie będzie taki zły pomysł żeby spytać się tutaj, zamiast tworzenia kont na setkach innych konkurencyjnych serwisach.
Moim celem jest stworzenie mapki z odnośnikami, gdzie pod odnośnikiem będą obrazki które zmieniają się zależnie od stanu odnośnika(a, a:focus etc.), z tym że jak widać w załączniku tło jest jakby posunięte lekko w dół nie wiem czemu(ten Image w załączniku zostawiłem specjalnie żeby było widać).
Podstawie może odpowiednie kawałki "kodu"
HTML

	<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>

css

#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:0xp;
	margin:0px;
}

#mapa{
	background: url('mapy/mapa_tlo.png');
	height:200px;
	width:200px;
	display:inline;
	float:left;
}

Jak widać jest tam kilka kawałków które miały to usunąć ale nie zadziałały...
Ma ktoś może jakieś lepsze pomysły na rozwiązanie tego problemu? Zapewne mój sposób jest trochę na około ale nie wpadłem na nic lepszego

Z góry dziękuję :)

Bardzo przepraszam za podwójny post, ale w ostatnim(napisanym stosunkowo dawno) zapomniałem dodać załącznik i osoby które już ten wątek odwiedziły, zapewne nie zrobią tego po raz drugi,chyba że pojawi się w nim coś nowego,a jest on niezbędny do zrozumienia problemu.(dokładniejszym ustawieniem miast będę się zajmował później)