[HTML/CSS] Różna odległość między divami w przegladarkach

[Evoker]

Witam, przeszukałem pobieżnie forum i wyszukiwarkę, wcześniej zerknąłem na kilka kursów, ale nie znalazłem odpowiedzi na to zagadnienie

Stworzyłem sobie obrazek, pociąłem i chciałem skleić divami, co by tabelek nie stosować.
Na początek chciałem to zrobić w sposób jak najprostszy, dlatego rozpisałem kilka zakotwiczonych divów

Kod: Zaznacz cały

<div id="center" >
 <div class="head">
     <div class="pierwsza">
     <img src="head.jpg" id="head">
     </div>
    <div class="druga">
     <img src="n1.jpg" id="n1">
     <img src="n2.jpg" id="n2">
     <img src="n3.jpg" id="n3">
      </div>
       <div class="trzecia">
     <img src="himera.jpg" id="himera">
     <img src="tancerka.jpg" id="tancerka">
      </div>
       <div class="czwarta">
     <img src="footer.jpg" id="footer">
     <img src="ev.jpg" id="ev">
     </div>
</div>
</div>

w stylach ustawiłem przede wszystkim wielkość obrazków i

Kod: Zaznacz cały

float: none;

okazało się, że po sprawdzeniu występują odstępy między grafikami (divami), więc poustawiałem im ujemne marginesy.

Nie byłoby problemu, ale pod FF ta odległość jest o 1px większa niż odległości między divami, niż pod IE i Operą.
Próbowałem wyzerować padding; border; wszelkiego typu marginesy, kombinowałem również z display, choć raczej efektów nie było.

Pewnie da radę ustawić to pozycjonowaniem absolutnym/relatywnym, choć raczej wolałbym ustawić przerwę miedzy divami, bo kiedyś się może przydać :>.

Jak to zrobić w najszybszy sposób?

próbowałem jeszcze zredukować liczbę divów do dwóch

Kod: Zaznacz cały

<div id="center" >

     <div class="head">


     <img src="head.jpg" id="head">
     <img src="n1.jpg" id="n1">
     <img src="n2.jpg" id="n2">
     <img src="n3.jpg" id="n3">
     <img src="himera.jpg" id="himera">
     <img src="tancerka.jpg" id="tancerka">
     <img src="footer.jpg" id="footer">
     <img src="ev.jpg" id="ev">
     </div>

</div>

choć w zmieniło to niewiele, żeby nie rzec "nic"

[Stig]

Podejrzewam, że pomocne byłoby zastosowanie atrybutu display o wartości block dla każdego elementu img. Przykład:

Kod: Zaznacz cały

img { 
display: block;
}

Jeżeli to konieczne, divy możesz pozycjonować przez użycie atrybutu float.

A tak BTW, mogę wiedzieć w jakim celu pociąłeś w ten sposób owy obrazek?

[Evoker]

Cóż, niektóre obrazki powinny być właśnie w linii pionowej, więc gdy dałem block; to trochę się rozsypały. Divom ustawiłem block, imgom inline, poświęciłem piksela i na razie zostawie jak jest.

divy możesz pozycjonować przez użycie atrybutu float.

Coś pokombinuje, bo może faktycznie to będzie lepsze wyjście.

mogę wiedzieć w jakim celu pociąłeś w ten sposób owy obrazek?

Ten konkretny tak dla wprawy. Ale ogólnie to używałem takiego ciecia na tabelkach, żeby np. zintegrować opcje menu z logo nadając obrazkom funkcje odnośników itp.