CSS- 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.

1. .solKolon {
2. float: left;
3. width: 200px;
4. background-color:#00CCFF;
5. }
6. p {
7. margin-left: 200px;
8. background-color:#CCCCCC;
9. }

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.

1. /* E5-Mac gizleyelim. sadece IE-Win görsün bu kodu. */
2. * html p {
3. height: 1%;
4. }
5. /* 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.

1. /* E5-Mac gizleyelim. sadece IE-Win görsün bu kodu. */
2. * html p {
3. height: 1%;
4. margin-left: 0;
5. }
6. /* 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.

1. /* E5-Mac gizleyelim. sadece IE-Win görsün bu kodu. */
2. * html p {
3. height: 1%;
4. margin-left: 0;
5. }
6. * html .solKolon {
7. margin-right: -3px;
8. }
9. /* 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:

1. /* E5-Mac gizleyelim. sadece IE-Win görsün bu kodu. */
2. * html p {
3. height: 1%;
4. margin-left: 0;
5. }
6. * html img.solKolon {
7. margin: 0 -3px;
8. margin: 0;
9. }
10. /* 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.