Internet Explorer 6 da meydana gelen margin problemini birçoğumuz biliriz. Bu konuda kaynak sayısı oldukça fazla. Yine de, fazla bilgi göz çıkarmaz anlayışıyla burada bu konudan kısaca bahsedeceğim.

Öncelikle sorun ie6 da ortaya çıkıyor. ie6′nın da 2014 yılına kadar kullanılabilecek olması webmaster’lar için, bu 8 yıllık Browser’ı gözardı etmemeleri gerçeğini ortaya çıkarıyor.

Şimdi konuya geçelim. Aşağıda bir örnek verdim. Örneğe göre ilk önce sorunu ortaya koydum sonra da çözümü gösterdim. Şöyleki;

HTML yapı

<div id="kutu">
 <div id="ickutu">
 içerik burada
 </div>
</div>

Yukarıda görüleceği üzere içiçe iki katman(div) yapısı var. Şimdi bunlara stil atalım.

CSS Stil yapısı

#kutu {
 width:500px;
 height:120px;
 background-color:#CCC;
 border:1px solid #333;
}
#ickutu {
 float:left;
 width:100px;
 height:100px;
 background-color:#999;
 border:1px solid #333;
 margin:10px 0 10px 100px;
}

Yukarıdaki CSS kodunu da ekleyince aşağıdaki görüntüyü yakaladım. (ie6 hariç);

ie6′da ise aşağıdaki görüntü çıkıyor.

Görüldüğü üzere ie6′da margin değerimiz soldan iki katına çıktı (100px vermiştik, 200px oldu). Float ve Margin i aynı yapıda kullandığımızda bu sorunla karşılaşırız. Aynı durum float:right ve sağ margin değerleri içinde geçerlidir.

Çözümü ise basit; Sorun yaşadığımız, yani float verdiğimiz elemente, display:inline özelliğini ekliyoruz ve sorundan kurtuluyoruz. Şöyleki;

CSS Stil yapısı

#ickutu {
 float:left;
 width:100px;
 height:100px;
 background-color:#999;
 border:1px solid #333;
 margin:10px 0 10px 100px;
 display:inline;
}

positioniseverything.net sayfasında konuyla ilgili daha geniş bilgi bulunmaktadır (Makale ingilizcedir).  Teşekkürler..