Obrazkowy problem, skąd bierze się odstęp? Opcje

[marcim]

Witam!
Mam taki otóż problem, tworze sobie stronkę i mam menu górne, zrobione z odsyłaczy obrazkowych, poukładanych w lini jeden obok drugiego. I teraz pod tym menu chcę dodać grafikę, to między tym menu a grafiką tworzy się odstęp ok 5px, dzieje się tak w IE, Firefoxie. W operze jest wszystko ok. I zauważyłem że gdy do tego menu dodam obramowanie, to pomiędzy dolnym obramowaniem, i dolną krawędzią grafiki tworzy się ten właśnie odstęp. Znika wszystko jak do diva z menu dodam ustaloną w px wysokość. I teraz moje pytanie, skąd bierze się ten odstęp?
Pozdrawiam

A i jeszcze kod:

[HTML] pobierz, plaintext 
<div style="width: 835px; height: 50px; margin: 0 auto;">
     <a href="index.php"><img src="grafika/glowna.gif" ></a>
     <a href="aktualnosci.php" class="belka"><img src="grafika/aktualnosci.gif" /></a>
     <a href="artykuly.php" class="belka"><img src="grafika/artykuly.gif" /></a>
     <a href="ksiega.php" class="belka"><img src="grafika/ksiega.gif" /></a>
     <a href="redakcja.php" class="belka"><img src="grafika/redakcja.gif" /></a>
     <a href="download.php" class="belka"><img src="grafika/download.gif" /></a>
     <a href="kontakt.php" class="belka"><img src="grafika/kontakt.gif"  /></a>
</div>
<div style="width: 835px; height: 148px; margin: 0 auto; background-image: url(grafika/top.gif)"></div>
<div style="width: 281px; height: 37px; background-image: url(grafika/tlo_belka.gif); float: left;"></div>
<div style="width: 20px; height: 37px; float: left;">
  <a href="index.php"><img src="grafika/glowna_mini.gif" style="border: 0px;" alt="Strona Główna"/></a>
</div>
<div style="width: 27px; height: 37px; float: left;">
  <a href="kontakt.php"><img src="grafika/napisz.gif" style="border: 0px;" alt="Napisz do Mnie"/></a>
</div>
<div style="width: 15px; height: 37px; float: left;">
  <a href="redakcja.php"><img src="grafika/redakcja_mini.gif" style="border: 0px;" alt="Redakcja"/></a>
</div>
<div style="width: 67px; height: 37px; background-image: url(grafika/belka_przejscie.gif); float: left;"></div>
<div style="width: 445px; height: 37px; background-image: url(grafika/belka_imieniny.gif); float: left;"></div>
<div style="width: 17px; height: 37px; background-image: url(grafika/belka_koniec.gif); float: left;"></div>
[HTML] pobierz, plaintext 

[wookieb]

Musisz ustawić line-height: 0px; zeby go nie było.

[marcim]

Próbowałem, nic nie dawało. Przedewszystkim chciałem się pozbyć wszystkich zbędnych divów. Chciałem ustawiać wszystko jako grafike. Wystarczyło dać dla img float:left i problem zniknął. Wszystko ładnie pasuje, a skąd wziął się ten problem, to już sam nie wiem. Teraz ten powyższy kod wygląda tak:

[HTML] pobierz, plaintext 
div style="width: 835px;margin: 0 auto;">
     <a href="index.php"><img src="grafika/glowna.gif" ></a>
     <a href="aktualnosci.php" class="belka"><img src="grafika/aktualnosci.gif" /></a>
     <a href="artykuly.php" class="belka"><img src="grafika/artykuly.gif" /></a>
     <a href="ksiega.php" class="belka"><img src="grafika/ksiega.gif" /></a>
     <a href="redakcja.php" class="belka"><img src="grafika/redakcja.gif" /></a>
     <a href="download.php" class="belka"><img src="grafika/download.gif" /></a>
     <a href="kontakt.php" class="belka"><img src="grafika/kontakt.gif"  /></a>
     <img src="grafika/top.gif"  />
</div>
<img src="grafika/tlo_belka.gif" />
<a href="index.php"><img src="grafika/glowna_mini.gif" style="border: 0px;" alt="Strona Główna"/></a>
<a href="kontakt.php"><img src="grafika/napisz.gif" style="border: 0px;" alt="Napisz do Mnie"/></a>
<a href="redakcja.php"><img src="grafika/redakcja_mini.gif" style="border: 0px;" alt="Redakcja"/></a>
<img src="grafika/belka_przejscie.gif" />
<div style="width: 445px; height: 37px; background-image: url(grafika/belka_imieniny.gif); float: left;"></div>
<img src="grafika/belka_koniec.gif" />
[HTML] pobierz, plaintext 

[Kill3R]

display block dla obrazków powinno pomóc

a wyjaśnienie problemu pod poniższym linkiem
objaśnienie do problemu