Forum PHP.pl > jakis problem z marginesami w IE

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: jakis problem z marginesami w IE

Forum PHP.pl > Forum > Po stronie przeglądarki > HTML \ XHTML

_kama

6.01.2006, 23:02:40

Nie mam podecia co jest nie tak, prblem wydaje sie banalny:

Kod

.blok {background-color:#e3e3e3; width: 640px; float:left; padding: 0; margin: 0}

.blok p{background-color:#FFFFFF; width: 187px; height: 100px; float:left; margin-left: 20px; margin-right:0; margin-top: 10px; margin-bottom: 10px; padding: 0;}

[HTML] pobierz, plaintext 
<div class="blok">
	<p>aparaty cyfrowe</p><p>aparaty cyfrowe</p><p>aparaty cyfrowe</p>
</div>
[HTML] pobierz, plaintext

Chce po prostu zeby te trzy elementy wyswietlily sie obok siebie w linii. W FF i Operze ok, a w IE ostatni p spada pietro nizej bo po lewej stronie margines robi sie z jakiegos powodu podwojny :/pomocy

Zajec

6.01.2006, 23:15:30

IE ma buga z podwójnymi marginesami dla elementów z nadanym float.

Dodaj sobie dla p
display: inline;

Wszystkie normalne przeglądarki zignorują tą linijkę (bo tak nakazuje specyfikacja), a IE potraktuje poważnie i elementy wyświetli jako elemeny liniowe. Marginesy będą wtedy normalne.

Nie bój się też o ograniczenia wynikające z tego (np. niemożłiwość ustawienia width/height). Zbugowane IE pozwala na nadanie tych wartości nawet dla elementów inline

P.S.

Kod

margin-left: 20px; margin-right:0; margin-top: 10px; margin-bottom: 10px;

Kod

margin: 10px 0 10px 20px;

_kama

6.01.2006, 23:40:39

Ze niby tak? Tylko o takiej zmianie mowiles?

Kod

.blok p{background-color:#FFFFFF; width: 187px; height: 100px; float:left; margin-left: 20px; margin-right:0; margin-top: 10px; margin-bottom: 10px; padding: 0; display: inline}

bo nie dziala ;( margines nadal jest taki duzy i p nadal spada w IE

Zajec

7.01.2006, 22:18:31

Tak, powinno działać. Podaj adres strony, gdzie to testujesz i gdzie nie działa.

P.S.
Mam nadzieję, że o strict doctype nie zapomniałe?

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.