Problemy z rozmiarem DIV-a

Nasz element blokowy ma już odpowiedni wygląd.
Kolejnym zadaniem jest określenie jego rozmiaru (szerokości i wysokości). Domyślnie ma on szerokość okna przeglądarki, a jego wysokość uzależniona jest od zawartości. Możemy jednak elementowi blokowemu nadać określony rozmiar.

Szerokość elementu ustalamy za pomocą właściwości width, a wysokość - za pomocą height. Do obu właściwości najwygodniej jest przypisać wartości w pikselach - na przykład poniższe.

-----------------------------------------
<style type="text/css">
#blok1 {
   background-color: yellow;
   border: 2px solid red;
   padding: 3px;
   width: 100px;
   height: 60px;
}
</style>
-----------------------------------------

Musimy jednak pamiętać , że według specyfikacji HTML (której przestrzegają między innymi przeglądarki Firefox i Opera) parametry width oraz height powinny określać rozmiar przeznaczony wyłącznie do zawartości bloku <div>. Niestety, Internet Explorer wartość nadaną właściwościom oraz interpretuje jako rozmiar całego bloku (czyli zawartość wraz z marginesem wewnętrznym oraz obramowaniem) .

W związku z tym blok wyświetlony w Internet Explorerze jest zawsze mniejszy niż ten sam blok wyświetlony w pozostałych popularnych przeglądarkach.

Różne sposoby rozwiązania tego problemu znajdziemy na stronie http://css-discuss.incutio.com/?page=BoxModelHack.

Z właściwościami width oraz height wiąże się jeszcze jedno niebezpieczeństwo. Internet Explorer właściwości width oraz height traktuje jako minimalną szerokość oraz wysokość. Oznacza to, że blok ma ustalony przez nas rozmiar tylko wtedy, gdy mieści się w nim cała jego zawartość . W innym wypadku blok zostaje automatycznie powiększony.

Pozostałe przeglądarki własności width i height traktują jako stały rozmiar - niezależnie od zawartości bloku jego szerokość i wysokość będzie zawsze taka sama, więc niemieszcząca się zawartość zostanie wyświetlona poza blokiem.

Na stronie www.greywyvern.com/code/min-height-hack.html przeczytamy o sztuczce CSS, której zastosowanie sprawi, że szerokość i wysokość bloku będzie identyczna we wszystkich przeglądarkach.


Danielos
Więcej znajdziecie na stronie KŚ Ekspert: www.ks-ekspert.pl