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 (IMG:style_emoticons/default/sad.gif)

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

[fizzlebubble]

Spokojnie, na co dzień pracuję z NDA, także na brak danych się nie obrażę (IMG:style_emoticons/default/tongue.gif) . Kod ogólnie jest dość dziwny. Nie bawiłbym się w ustawianie tych obrazków paddingami/marginami, tylko na #mapa ustawiłbym position relative, a na #poznan position absolute (tylko dla background ustaw no-repeat!) i wypozycjonuj top'em i leftem. Zrobiłem tak w Inspectorze i działa ładnie (IMG:style_emoticons/default/smile.gif) .

Jest też drugie podejście, jeśli w/w Ci "nie podchodzi". Dla "a" (elementy defaultowo liniowo) ustaw display: inline-block lub block, tylko dla wszystkich backgroundów musi być no-repeat!

Mam nadzieję, że pomogłem (IMG:style_emoticons/default/smile.gif) .