[html] roznice w pozycjonowaniu div'ow pod IE i FF

[j4f]

Problem polega na pozycjonowaniu blokow div. Pod IE dziala dobrze natomiast pod FF dzieja sie rozne rzeczy. Oto prosty kod:

Kod: Zaznacz cały

<div style="width: 800px; border: 3px solid black;"> <!-- calosc -->
	 <div style="width: 800px; height: 300px; background-color: red;"> <!-- banner -->
	 	  <h1>baner</h1>
	 </div>
	 <div style="width: 200px; height: 300px; background-color: green; float: left;"> <!-- lewa -->
	 	 <h1>lewa</h1>
	 </div>
 	 <div style="width: 400px; height: 300px; background-color: blue; float: left;"> <!-- srodek -->
	 	  <h1>srodek</h1>
	 </div>
 	 <div style="width: 200px; height: 300px; background-color: yellow; float: left;"> <!-- prawa -->
	 	  <h1>prawa</h1>
	 </div>
</div>

tak powino wszystko wygladac i wyglada pod IE:
http://j4f.unl.pl/ok.JPG

natomiast po FF kolumny lewa, srodek i prawa wychodzi poza div calosc. poza tym baner odstaje u gory od ramki div-a calosc.

podglad w FF:
http://j4f.unl.pl/zle.JPG

[Carnophage]

Z tego co mi wiadomo, to border wlicza sie w width. Innymi slowy baner i 3 kolumny powinny miec width maks 794px. Stad dziwny wyglad w FF.
Jesli sie myle, niech mnie ktos naprostuje, dawno sie juz css nie bawilem.

[edit]
Tutaj bardziej precyzyjne informacje na ten temat.

[tomasiek]

Błąd jest gdzie indziej:
1. Biały pasek jest spowodowany przez... h1 w bannerze - zmień kod na:

Kod: Zaznacz cały

	 	  <h1 style="margin-top:0px;">baner</h1>

2. brak obramowania jest spowodowany działaniem float. Zastosowanie float powoduje że boxy wyskakują z dotychczasowego położenia. IE to źle interpretuje - akurat w tym przypadku rendering Fx jest w 100% prawidłowy. Rozwiązanie jest przerwanie tego "wyskoczenia" przez zastosowanie "czyściciela" - najprostszą metodą jest zastosowanie diva z ustawionym clear:both po elementach z float.
3. Twój kod powinien wyglądać tak:

Kod: Zaznacz cały

<div style="width: 800px; border: 3px solid black;"> <!-- calosc -->
	 <div style="width: 800px; height: 300px; background-color: red;"> <!-- banner -->
	 	  <h1 style="margin-top:0px;">baner</h1>
	 </div>
	 <div style="width: 200px; height: 300px; background-color: green; float: left;"> <!-- lewa -->
	 	 <h1>lewa</h1>
	 </div>
 	 <div style="width: 400px; height: 300px; background-color: blue; float: left;"> <!-- srodek -->
	 	  <h1>srodek</h1>
	 </div>
 	 <div style="width: 200px; height: 300px; background-color: yellow; float: left;"> <!-- prawa -->
	 	  <h1>prawa</h1>
	 </div>
<div style="clear:both"></div>
</div>

4. Podsumowując - IE uprościł (pozornie) sprawę webmasterom... ale nie trzyma się w żaden sposób logiki specyfikacji css. Natomiast Fx wyświetla to co ma w kodzie . Przy większej ilości float IE się gubi - bo nie potrafi zgadnąć co webmajster miał na myśli. Zastosowanie poprawnego (pod względem logiki) kodu powoduje że problemy znikają.
5. Dla usystematyzowania:
http://kurs.browsehappy.pl/CSS/Float

[misku]

Lepiej rób strony zgodnie ze standardami, bo wtedy masz prawidłowy wygląd w Firefox, Opera, Safari, Konqueror itd. Wiesz, że nowsze wersje przeglądarek będą zawsze interpretowały kod tak samo. A IE w każdej wersji interpretuje sobie kod po swojemu, więc szkoda się męczyć w dostosowywaniu kodu do tego ignoranta standardów. Proponuje nauczyć IE uwzględniać standardy dodając odpowiednią linię w kodzie. Więcej informacji znajdziesz tu http://www.webinside.pl/css/artykuly/257
Pozdrawiam!

[artchur]

Sam ostatnio miałem problemy z divami. Jeśli wydaje Ci się, że Twój kod jest ok, a w IE wyświetla się dobrze, a np w FF źle, to najprowdopodobniej prawidłowy wynik jednak jest w FF. W IE nieraz trzeba stosować różne "tricki", które bez pomocy google dla początkującego są dość dziwne. Ale niestety w dalszym ciągu dużo ludzi korzysta z IE :/

[j4f]

Dzieki bardzo za pomoc w rozwiazaniu Zawsze staram sie zeby css i xhtml sie walidowal. Wiem ze w wiekszosci przypadkow to IE zle interpretuje jednak jak kolega powyzej wspomnial jest to jedna z najczesciej uzywanych przegladarek jak narazie