CSS

Internet Explorer 6, Float, Margin-Left Problemi

Internet Explorer 6, Float, Margin-Left Problemi
31 Ağustos
13:46 2009

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

CSS kodlarım ise:

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

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.

Benzer Yazılar

Yorumlar