IE’un 3 piksel Metin Öteleme Hatası
Bu hata IE5-6/Win versiyonlarında görünür. Float uygulanmış elementlere komşu metinlerin maruz kaldığı bir hatadır. Örneği bir elementinize float:left tanımı yaptınız ve yanına bir paraf yazı eklemek istediğinizde, ie5-6 versiyonlarında soldaki float uygulanmış element içeriği boyunda sağdaki metin soldan 3 piksel kadar içeriğini öteleyecektir.
.solKolon {
float: left;
width: 200px;
background-color:#00CCFF;
}
p {
margin-left: 200px;
background-color:#CCCCCC;
}
Başlangıç olarak değişen içeriğine göre yükselik alan metin alanına(sağdaki metin) müdahale edeceğiz. Görünüm olarak 3 piksellik boşluğu kaldırabiliriz. IE5-6 yükseklik tanımını min-height gibi yorumlar, elementin yüksekliğine küçük bir değer(height:1%) atadığımızda bu elementin boyutunu değiştirmeyecektir. Bu atama diğer web tarayıcılarını etkileyecektir bu nedenle diğer web tarayıcılarından bu kodu gizlemeliyiz.
/* E5-Mac gizleyelim. sadece IE-Win görsün bu kodu. \*/
* html p {
height: 1%;
}
/* IE5/Mac den gizlemeye son */
Ancak şöyle bir sorunumuz daha var ki önceki konulardan bildiğimiz gibi bu alana float uygulandığında margin-left:200px tanımını IE iki kat görecektir bunu engellemek için margin-left değerini sıfırlamalıyız.
/* E5-Mac gizleyelim. sadece IE-Win görsün bu kodu. \*/
* html p {
height: 1%;
margin-left: 0;
}
/* IE5/Mac den gizlemeye son */
İçerideki boşluğu aldık ancak elementler arasında boşluk kaldı bunu kaldırmak için sağ margin değerine -3 piksel atama yapmalıyız.
/* E5-Mac gizleyelim. sadece IE-Win görsün bu kodu. \*/
* html p {
height: 1%;
margin-left: 0;
}
* html .solKolon {
margin-right: -3px;
}
/* IE5/Mac den gizlemeye son */
Bu tüm sorunlarımız çözecektir. Tabi float uygulanan elementin içinde resim yoksa. Resmin olduğu durumlarda sorun olacaktır. Bu sorunu çözmek için IE5/Win için resmin sağına ve soluna -3 piksel margin ataması yapmalıyız. IE6 bu margin’leri görmemelidir. Bunun için kodumuz şöyle olacaktır:
/* E5-Mac gizleyelim. sadece IE-Win görsün bu kodu. \*/
* html p {
height: 1%;
margin-left: 0;
}
* html img.solKolon {
margin: 0 -3px;
ma\rgin: 0;
}
/* IE5/Mac den gizlemeye son */
Biliyorum bu kod bizim sade ve temiz kod mantığımıza çok ters ama yapılabilecek pek bir şey de yok. Bu CSS’in sorunu değil tamamen IE’nin sorunundan kaynaklanıyor.
[...] bir durum ancak bu hatanın geçen makalede bahsettiğimiz 3 piksel metin öteleme hatası ile ilişkisi vardır. Bu hatayı düzeltmek için sondaki float uygulanmış öğeye sağdan 3 [...]
Galiba ben yazınızı tam anlamadım.
Benim anladığım 3 px fazladan öteleme ie6′da var ve ie7 de yok.margin değerini -3 verdiğimizde ie6 da görüntü düzelirken ie7 de bu sefer 3 birimlik birbirine girme oldu.Çünkü * html ie7 içinde anlamlıydı. Bunu nasıl çözerim diye sormuştum.Sitenizi biraz daha inceleyince css içine javascript gömerek ie6 ise margin i -3 yap değilse 0 yap şeklinde bir ifade ile işimi hallettim.Teşekkürler.
ie7 de zaten sorun yok ki sorun ie 7 den öncekilerde var
Gerçekten beni ipten alan bir makale bu.Gerçekten teşekkürler.Ama kafama takılan bir soru var *html firefoxta çalışmasını engelliyor ama IE7 de bu sefer iki kutuyu bir birine geçiriyor.
* html .solKolon {margin-right: -3px;
}
Kodunu IE6 da çalışıp IE7 de çalışmamasını nasıl sağlayabiliriz?
Bu 3piksel kayma genelde float uygulanmış alanın içinde eğer tam float alanın kadar genişlikte içerik varsa sorun oluyor mesela resim varsa site yapınız bozuluyor.
3 piksel bazı insanlar için görünmeyecek kadar küçük bir değerdir fakat işini bilen ve özen gösteren için hayati önemi vardır. Yine bilmeyen bir insan göremez sitelerdeki böyle ufak hataları fakat biraz göz zevki olan kişi 3piksellik sapma yüzünden bir terslik olduğunu farkedecektir. Ufak ama önemli bir detayı anlattığınız için teşekkürler…