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