"Çalışmadan, öğrenmeden, yorulmadan rahat yaşamanın yollarını aramayı alışkanlık haline getirmiş milletler, evvela haysiyetlerini, sonra hürriyetlerini ve daha sonra da istikballerini kaybetmeye mahkumdurlar."

Mustafa Kemal ATATÜRK



13 Şubat 2008

Internet Explorer ile W3C’nin CSS Kutu Modeli Farkı

Etiketler: , , , , , ,
Kategori Css, Web |

Makalelerimi yazarken bazen konuyu pekiştirmek için basit ve sade grafikler hazırlar, onlar üzerinden yazıma devam ederim. Css’in Temeli “Kutu Modeli” başlıklı yazımda da böyle bir resim hazırlamıştım fakat şuradaki makaleyi görünce değinmeden geçemedim.

Internet Explorer ile W3C standartları arasındaki CSS kutu modeli tanımlaması farkını anlatan bir resimdi bu gördüğüm. Eğer CSS kutu modeli hakkında bilginiz yoksa şu üç makaleyi okumanızı tavsiye ederim:
Kutucuk Modeli,
CSS ile Kutu modeli, sorunları ve çözümleri,
Css’in Temeli “Kutu Modeli”.

Konuyu pekiştirmek için de görmüş olduğum resmi sizinle paylaşayım. Resmin konuyu ne kadar iyi anlattığını görünce neden bu kadar takdir ettiğimi anlayacaksınız.

CSS kutu modeli

“Internet Explorer ile W3C’nin CSS Kutu Modeli Farkı” için 8 Yorum

  • 1 Kaan Fakılı

    Teşekkürler Erhan, oldukça işime yarayacak.

  • 2 Hüseyin

    Ben de http://www.fatihhayrioglu.com/?page_id=119 buradaki bir sayfada bunu görmüştüm. Internet Explorer’ın saçmalıklarından biri daha ! :/ Firefox kullanalım, kullanmayana kullandırtalım :)

  • 3 yakuter

    Fatih Hayrioğlu’nun kutu modeli ile ilgili makalesini de yazıma ekledim, iyi ki hatırlattın ;)

    Yorumun konusunda sana tam olarak katıldığımı söyleyemem. Sonuçta bilgisayar bilmeyen ve sadece alışkanlıklar üzerinde internet kullanan insanlar internet explorer kullanıyorlar. Onları yeni bir tarayıcıya geçmek için zorlamaktansa biz tüm tarayıcılarda aynı görüntüyü veren siteler tasarlamalıyız ;)

  • 4 Adem

    Erhan bahsettiğin meseleyi IE yeni sürümde halletti; sen daha yeni mi farkettin? Gerçekten çok şaşırdım. Çünkü bu konu yıllardır en amatör web tasarımı sitelerinde bile tartışılan, açıklanan; hatta çözüm yolları anlatılan (css hack) konudur . IE’nin yeni sürümünde böyle bir sorun kalmadı artık. Aşağıdaki örnekteki gibi kullanarak IE(nin sürümleri) ve diğer tarayıcılar arasındaki farkı ortadan kaldırabilirsiniz (div)imizin IDsi kutu olsun. Genişliğinin 100px olmasını istiyoruz.):

    /*
    yeni tarayıcılarda border ve paddingle birlikte kutunun en geniş halinin 100px olabilmesi için (border'ı 1px, padding'i 5px alırsak)
    border+padding+width+padding+border=100px
    1+5+width+5+1=100
    6+width+6=100
    width=100-12
    width=88px olması gerekir...
    */
    #kutu { border: 1px; padding: 5px; width: 88px; }
    * html #kutu { width: 100px; } /* IE6 border ve paddingi wdth'in içinde kabul eder. */
    *+ html #kutu { width: 88px; } /* IE7 ve üzeri için tekrar standarda göre width değeri veriyoruz. */

    Kolay gelsin!

  • 5 yakuter

    @Adem, ya sen başka anladın ya da ben anlatamadım sanırım. Burada benim vurgulamak istediğim “daha önceden değinmiş olduğum bir konuda” konuyu çok güzel anlatan bir resimle karşılaştığım.

    Ben bunu uzun zamandır biliyorum ama şimdi bile öğrenmiş olsam senin “sen daha yeni mi farkettin?” gibi bir tepki beklemiyordum. Amatör sitelerde falan tartışıldı demişsin. Ben kendime hiç bir zaman profesyonel demedim. Senin aksine ben insanlara yukardan bakmayı sevmem veya her şeyi ben bilirim yaklaşımı bana göre değildir. Ayrıca zaten ben makalelerimi senin gibi bu konuyu çok çok iyi bilenlerden ziyade bu konuda yeni olanlar için yazıyorum. İstersem buraya www nedir diye bir yazıyla başlayadabilirim insanlara öğretmek için ama o zamanki tepkini hayal bile edemiyorum. Heralde bu çocuk hiç bir şey bilmiyor deyip siteye bile bir daha uğramazsın :)

    Umarım şimdi anlatabilmişimdir…

  • 6 Adem

    Erhan amacım öyle ukalalık etmek değildi. İlk okuduğumda (atıfta bulunduğun yazında bundan bahsetmemen de katkıda bulunmuş olabilir) sanki w3c ile IE arasındaki farkı yeni keşfettiğini sandım (gerçi öyle olsa dahi daha farklı bir dil kullanmam gerekti). Daha sonra öyle olmadığını farkettim; ama çok geçti. Yoksa “profesyonel” de olsa herkesin bilmediği pek çok şey vardır. Bu ayıp bir şey de değildir. Yine de benden kaynaklanan bu hatadan dolayı senden ve ziyaretçilerinden özür dilerim.
    Aslında öyle her yazıya yorum yazan biri de değilim (tamamı bir elin parmaklarını geçmez). Her nedense ilk okur okumaz yorumladım; sebebini ben de bilmiyorum. Ama demek ki öyle alelacele yoruma kalkışmamak gerekirmiş.
    NOT: Bu arada itiraf edeyim. Ben Wordpress’e yeni başlayan biri olarak belki de en çok şeyi senden öğrendim. Dolayısı ile teşekkür ederim.
    Kolay gelsin!

  • 7 yakuter

    Birbirimizi anlayabildiğimize sevindim Adem. Aslında farklı da düşünmüyormuşuz ama işte öyle bir anda frekanslar tutmayabiliyor ;)

  • 8 Duygu

    bildiğim kadarıyla W3C’ de margin-left i 2 katı olarak algılıyor. IE’ de farkedemiyorsunuz ama firefoxda uçurum var


Yorum Yapın

yakuter.com © 2006-2008 Erhan Yakut. Tasarım Fallendesign.
Site içerisindeki içerikler izinsiz veya kaynak gösterilmeksizin kopyalanamaz, alıntı yapılamaz.

Wordpress Valid XHTML 1.0 Valid CSS