CSS Kutu Modeli (Box Model) ve Internet Explorer

CSS ile tasarım yapmak artık moda değil standartlara uymak açısından bir zorunluluk halini aldı. Ancak web tasarımcıları için CSS ile tasarım yapmanın en gıcık yönü olan tarayıcılara uyumluluk ise ne yazık ki Internet Explorer yüzünden hala baş belasıdır. Her ne kadar her geçen gün Internet Explorer 6 kullananlar azalsa ve Internet Explorer’a karşı tepkiler büyüse de hala çok büyük bir kesim Internet Explorer kullanmakta. Hatta Internet Explorer 6.

Bu uyumluluk sorunlarının başında ise Internet Explorer ve W3C standartları’nda farklı yorumlanan CSS Kutu Modeli yer alıyor. Kutu Modeli hakkında daha fazla bilgiye Fatih Hayrioğlu‘nun CSS Dersleri’nden ulaşabilirsiniz. Biz burada sadece Internet Explorer ve W3C standartlarında kutu modelinin sayfada nasıl yorumlanacağı ve görüneceğine bakacağız.

W3C standartlarında Kutu Modeli yukarıdaki gibi yorumlanmaktadır. Yani modelimize vereceğimiz genişlik değeri (width) bizim kutumuzda yer alacak içeriğin genişliği olurken vereceğimiz iç boşluk (padding), dış boşluk (margin), ve kenarlık (border) genişlikleri width değerine eklenecek ve sayfamızda kapalayacağı toplam genişlik verdiğimiz değerlerin tümünün toplamına eşit olacaktır.

Internet Explorer ise Kutu Modellerini bu şekildeki gibi yorumlamaktadır. Kutumuza vereceğimiz genişlik değeri sadece içerik alanımızın genişliği değil aynı zamanda kenarlık ve iç boşluk genişliklerini de kapsayan bir değer olmaktadır. Sayfada kaplanan toplam alan ise belirttiğimiz width değeri ve dış boşluk (margin) değerlerinin toplamı olacaktır.

Ayrıca siz de bu işkencelerden daha çabuk kurtulmak istiyorsanız sitenizde Internet Explorer 6 kullanıcılarının göreceği bir mesaj yayınlayabilirsiniz. Aynen şurada anlatıldığı gibi