Mustafa Kemal ATATÜRK
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.

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

1 Kaan Fakılı
14 Şubat 2008, 00:45
Teşekkürler Erhan, oldukça işime yarayacak.
2 Hüseyin
14 Şubat 2008, 13:35
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
14 Şubat 2008, 13:50
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
15 Şubat 2008, 09:54
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)imizinIDsikutuolsun. 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
15 Şubat 2008, 12:14
@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
15 Şubat 2008, 13:02
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
15 Şubat 2008, 13:26
Birbirimizi anlayabildiğimize sevindim Adem. Aslında farklı da düşünmüyormuşuz ama işte öyle bir anda frekanslar tutmayabiliyor ;)
8 Duygu
02 Mart 2008, 14:15
bildiğim kadarıyla W3C’ de margin-left i 2 katı olarak algılıyor. IE’ de farkedemiyorsunuz ama firefoxda uçurum var