Onur Yardımcı Title
Onur Yardımcı Link

IE6 ve padding

CSS kodu yazarken hepimizin başına gelecek bir sorun. (padding değil, IE6 )

Herhangi bir DIV’e bir border verirsiniz ve içeriğin border’a birleşik olmaması için de padding verirsiniz.

Bu normal olarak tek bir DIV ‘de ciddi bir sorun yaratmaz. Aslında problem orada duruyordur ama göze batmıyordur. Peki bu DIV’in hemen yanına float ile bir DIV daha koyarsanız ne olur? Normalde 300px olan 2 tane DIV yan yana diyelim. Ve bunlara her yönden 10px padding verdiniz. Firefox, Safari, Opera ve IE7 W3C önerilerine uygun olarak bu DIV’leri 300′er px kabul eder ve içeriği de border ile 10px mesafeli olacak şekilde basar. Yani içeriğimiz 280×280 piksellik bir kutu içinde gibi olur.

Oysa IE6 bunu bu şekilde yorumlamaz. İçeriğin 300px olacağını kabul eder ve üstüne 20px padding ekleyip border’ı ondan sonra çizer. Yani elimizde 300×300 piksellik DIV’ler olması gerekirken 320×320 piksellik DIV’ler olur. Resimli anlatımı için Wikipedia’dan aldığımız GPL lisanslı çizim :

box-model-bug

Eğer bu 2 DIV’in içinde durduğu bir başka DIV varsa ve genişliği de 600px ise sağda durması gereken DIV yer bulamaz ve aşağıya düşer. Bu bir web programcısının en istemeyeceği şeydir, düzgün gözükmeyen bir web sitesi.

Peki bunun için ne yapabiliriz? Öncelikle IE6 için olan hilelere başvurabiliriz.

CSS kodu içinde DIV’lerin genişliklerini sadece IE6′nın okuyabileceği şekilde yeniden verebiliriz.

Örnek :

XHTML kodu:


 


İçerik buraya girilecek.




CSS kodu:

#left {float:left; width:300px; border:thin solid #000; padding:10px}
* html #left {width:280px}

 

Bu durumda genişlikler düzgün gözükecektir. Ama DIV’in boyutları değişecek ve ilerde padding değiştirmeye ya da kaldırmaya kalktığımızda hem 2 yerde değişiklik yapmak zorunda kalacağız hem de CSS kodumuzu kirletmiş olacağız.

Peki benim yaptığım çözüm ne?

Ben bunu yerine padding kullanmıyorum. Peki o zaman nasıl içeriği border’dan uzak tutacağız?

Çözüm padding kullanacağımız yerde 2. bir DIV daha kullanıp padding ile vereceğimiz boşluğu margin ile vermek.

Örnek :

XHTML Kodu :



İçerik buraya gelecek





CSS kodu:

#left {float:left; width:300px; border:thin solid #000;}
#left .content {margin:10px}

 

Bu sayede her gezginde ölçüleri düzgün gözükecek bir sayfamız oluyor. Ayrıca content sınıfı için CSS’de tek bir margin vererek daima içeriklerimizin çevresindeki boşlukların aynı olmasını sağlayabiliyoruz.

Toplam Yorum: ...
captcha
Resimde gördüğünüz harfleri yukarıdaki alana giriniz