Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css] wysokosc div'a
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
kufalo
8.04.2009, 12:19:41 
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.   <title></title>
  5.  </head>
  6.  <body>
  7.   <div style="width:200px;border:1px solid red">
  8.    <div style="min-height:200px">
  9.     <div style="margin:10px">text</div>
  10.    </div>
  11.   </div>
  12.  </body>
  13. </html>
[HTML] pobierz, plaintext


Mam dziwny problem z wysokoscia bialego pola wewnatrz czerwonej ramki.
Wydaje mi sie, ze powinien miec 200px, ale na roznych przegladarkach ma 210 lub 220.
Winowacja jest wewnetrzny margin, ale nie bardzo rozumiem dlaczego daje on taki dziwny skutek...?
piotrooo89
8.04.2009, 12:28:37
ale o co Ci chodzi dokładnie? bo ja nie wiem w czym problem.

zrobiłem sobie tak:
[HTML] pobierz, plaintext 
  1. <div style="width:200px; border:1px solid red;">
  2. 	<div style="min-height:200px; background-color: blue;">
  3. 		<div style="margin:10px;background-color: yellow;">text</div>
  4. 	</div>
  5. </div>
[HTML] pobierz, plaintext


i wyświetla mi się tak:

kufalo
8.04.2009, 12:42:53
Teraz juz wiem, ze chodzi o ten bialy pasek nad niebieskim polem.
Skad on sie bierze, skoro niebeskie tlo ustawione jest w divie nadrzednym?
piotrooo89
8.04.2009, 12:47:03
daj tak i po sprawie:

[HTML] pobierz, plaintext 
  1. <div style="width: 200px; border: 1px solid red;">
  2. 	<div style="min-height: 200px; background-color: blue; overflow: hidden;">
  3. 		<div style="margin: 10px; background-color: yellow;">text</div>
  4. 	</div>
  5. </div>
[HTML] pobierz, plaintext


bierze się to z tak zwanego biegu dokumentu (flow) nie umiem tego wyjaśnić na Kusry Browsehappy::FLOW masz wyjaśnione.
Jellyeater
26.04.2009, 12:53:03
Cytat
Winowacja jest wewnetrzny margin, ale nie bardzo rozumiem dlaczego daje on taki dziwny skutek...?

To wina tego, że IE liczy marginesy i paddingi do wewnątrz (odejmuje od szerokości podanej, marginesy i paddingi i otrzymuje długość pola dla textu). Reszta przeglądarek robi to jak W3C przykazał czyli na opak. Podajesz szerokość kolumny, a do tego dodawane są marginy i paddingi.
pawkow
27.04.2009, 11:14:41
Ewentualnie po prostu:

Kod
<div style="width:200px; border:1px solid red;">
<div style="min-height:200px; background-color: blue; padding: 10px;">
<div style="background-color: yellow;">text</div>
</div>
</div>
Zajec
13.05.2009, 22:51:45
Cytat(Jellyeater @ 26.04.2009, 13:53:03 ) *
To wina tego, że IE liczy marginesy i paddingi do wewnątrz (odejmuje od szerokości podanej, marginesy i paddingi i otrzymuje długość pola dla textu). Reszta przeglądarek robi to jak W3C przykazał czyli na opak. Podajesz szerokość kolumny, a do tego dodawane są marginy i paddingi.
Nie w tym wypadku. Wystarczy w pierwszej lini kodu (X)HTML użyć doctype typu strict i IE normalnieje smile.gif Lista DTD: http://www.w3.org/QA/2002/04/valid-dtd-list.html . W przykładzie masz prawidłowy DOCTYPE więc to ten błąd.

Uwaga: nie należy używać <?xml jako pierwszej lini. Od razu ta z DOCTYPE.


Już wiem na co nadział się kufalo. Marginesy są dosyć zakręcone, zdradliwe. Czasem element dziecka jest "zabierany" przez rodzica i wtedy rodzic ma większy rozmiar niż być się spodziewał. U Ciebie własnie to się stało: tej nabardziej zagnieżdzony div normalnie nie wpłynąłby nawet ze swoim marginesem na rozmiar rodzica. Ale gdy rodzic (ten środkowy div) zabiera sobie margines dziecka, to już wtedy ziększa swoją wysokość.

Możesz faktycznie użyć paddingu, tutaj już nie ma takich niespodzianek.
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.