Internet Explorer 6, Float, Margin-Left Problemi

Sağolsun Microsoft, şu Internet Explorer 6′nın kökünü kurutamadı ve hala Internet Explorer 6 için uyumlu web siteleri oluşturmak zorunda kalıyoruz. Hayır, sadece IE6 olsa neyse. Birkaç satır kodun derlenmesi sonucu bir web sitesi IE6, IE7 ve IE8 tarayıcılarının her birinde farklı görünebilir mi? İşte bu yönde sıkıntılardan biri ise float ve margin-left bir araya gelince oluyordu

Internet Explorer 6, Float, Margin-Left Problemi

İlgili alan için yazdığım HTML kodum şöyle:

internet explorer 6 float margin left problemi 01 Internet Explorer 6, Float, Margin Left Problemi

CSS kodlarım ise:

internet explorer 6 float margin left problemi 02 Internet Explorer 6, Float, Margin Left Problemi

Neticesinde 4×2 şeklinde oyunlar listelenmeli. IE6 dışında problem yok tarayıcılarda. Ancak IE6 ile alttaki görüntüyü elde ediyorum.

internet explorer 6 float margin left problemi 03 Internet Explorer 6, Float, Margin Left Problemi

Halbuki katmanın solundan 11px uzunluğunda boşluk bırakılmalıydı. IE6 ise 22px boşluk bıraktı ve katman içerisindeki içerik bir alt satıra düştü.

Çözüm ise,

.corta .data .yeni .cont a{display:inline; width:120px; height:111px; background:#8F0A50; padding:8px; color:#FFF; text-align:center; float:left; margin:8px 9px 8px 11px;}

düzenlemesiyle oldu. Yani display:block; yerine display:inline; kullanırsak, hem tüm tarayıcılarda uyumlu bir katman elde ediyoruz hem de sol boşluklar düzgün oluşuyor.