Layout’umuz ister 2 kolonlu olsun, ister 3 kolonlu olsun, eÄŸer tablosuz tasarım yapacaksak aÅŸmamız gereken önemli bir sorun var: EÅŸit Yükseklikte Kolonlar

YüksekliÄŸini “otomatik” (height:auto) olarak ayarladığımız katmanların yükseklikleri, içlerine konulan içeriÄŸe göre deÄŸiÅŸkendir.

3 kolonlu bir tasarım yaptığımızı farzedelim. Sol kolonda 2 paragraf yazı, orta kolonda 10 paragraf yazı, saÄŸ kolonda da 4 paragraf yazı olsun. EÄŸer kolonların yüksekliÄŸini otomatik olarak belirlediysek hepsinin yüksekliÄŸi farklı olacaktır. Dolayısıyla eÄŸer arka plan resmi veya rengi verdiysek kötü bir görüntü oluÅŸacaktır. Ä°ÅŸte bu sorunu çözmek için Mark Challoner‘in geliÅŸtirdiÄŸi oldukça pratik bir çözüm var: Yazının devamı »

IE 6.0′da yaÅŸanılan bazı CSS Özellik Belirteçleri(property) sorunlarından biri : min-height

Güncel birçok tarayıcıda aynı görüntüyü veren tasarımlar oluÅŸturmayı web tasarımcıların hepsi ister, ancak bunu yapabilmek bilgi ve tecrübe isteyen zorlu bir iÅŸtir. “min-height” CSS belirteci, ziyaretçilerimizin en fazla kullandığı tarayıcı olan IE’de üzülerek söylüyorum ki çalışmamaktadır.

Peki ne yapmalı? Cevabı hemen aşağıda, hem de 2 şekilde (belki de daha fazla):

Birinci Hack

secicimiz {
min-height:500px;
height:auto;
}
*html secicimiz{
height:auto;
}

Yukarıdaki kod parçacığında, başına *html (star html) koyduğumuz seçiciyi sadece IE okur, ilk seçiciyi ise diğer tarayıcılar okur.
Mantığını biraz daha açacak olursak, Internet Explorer, height belirtecini zaten min-height gibi iÅŸleme sokuyor ve min-height diye bir belirteç tanımıyor, zaten hata da burdan kaynaklanıyor. Yazının devamı »

CSS ile boğuşanlar için güzel bi alternatif var ve eminim bilmeyip de yeni öğreneceklerin çok işine yarayacaktır:

Star html Selector Bug

CSS kodlamamızı Internet Explorer’ın yanlış (veya kendi kafasına göre) yorumladığını xHTML kodlayanlar bilirler. Firefox’ta, Opera’da elde ettiğimiz düzgün görüntüyü IE’de de yakalayabilmek için onlarca hack kullanırız ve bunlardan biri de Star html Selector Bug’dır.

Hemen nedir, ne değildir açıklayalım:

#ornek-id{
font-size: 14px;
margin-left: 30px;
}
*html #ornek-id{ /* star html hack */
margin-left: 10px;
} Yazının devamı »