IE’da İkikat görülen Margin Problemi ve Çözümü
Bir blok-level elemente float değeri ve margin değeri atandığında IE’da sorun yaşarız. Örneğin float:left değeri atanmış bir içerik kutusuna soldan 100px kadar ayırmak istediğinde IE’de soldan 100px olması gereken mesafe 200px görünecektir.
.kapsul1 {
float: left;
width: 150px;
height: 150px;
margin-left: 100px;
}
Bu hataya yanlızca float ve margin atamalarını beraber kullandığımız blok-level elementlerde karşılaşmaktayız. Bu element’ten sonraki elementlerde bu hata görülmeyecektir. Yani bu hataya sadece ilk float-margin uygulanan blok-level element maruz kalacaktır.
Çözümü ise çok basit display:inline tanımlaması bizim sorunumuzu çözecektir.
.kapsul1 {
float: left;
width: 150px;
height: 150px;
margin-left: 100px;
display: inline;
}
Bu makale hazırlanırken positioniseverything.net yararlanılmıştır. Daha ayrıntılı bilgiyi bu sitede bulabilirsiniz.(eng)
@Yunus Yurttürk Genelde pek sorun oluştuamamasına karşın. Eğer blok özelliklerinde yaralanıyorsak evet oluşturacaktır, ama bu sorun da giderilebiir
display:inline; tanımı yapmamız, div’lerimiz açısından bir sorun yada farklılık okuşturur mu ?
Süpersin abi, galiba her sorunun çözümünü bu sitede bulabiliyoruz. İyi çalışmalar
@SurmeneliAvci bir ekran görüntüsü gönderebilirseniz belki daha açıklayıcı olacaktır.
Birşeyi yazmayı unutmuşum sorun paragraftan kaynaklanıyor ama niye?
#container {
border:1px solid #336699;
}
#bar {
width: 200px;
background: #EBEBEB;
padding: 0;
}
The background color on this div will only show for the length of the content. If you’d like a dividing line instead, place a border on the left side of the #mainContent div if it will always contain more content.
Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero.
Paylaşımlarınız için sonsuz teşekkürler…
FF de karşılaştığım bir problemi sizinle paylaşmak istiyorum. Kenarlık çökmesinin tam tersi bir durum. İç içe konulan 2 kutu var.
dış kutu: yalnızca border ayarlanmış
iç kutu : yalnızca background ayarlanmış
görünüm :iç kutuyla dış kutu arasında üstte ve altta boşluklar var(iç kutunun margini gibi görünüyor).
iç kutu için;
{padding-top:0; padding-bottom:0; margin:0} bile ayarlansa sorun devam ediyor.padding değerleri sıfırdan büyük yapılırsa boşluklar kayboluyor.Acak bu seferde:belittiğimizden daha büyük bir padding oluşuyor.Bu problemi koduyla ieninde paddingini 15px fazla ayarlayarak aşabiliyorum.
Ancak problem:Her iki tarayıcıdada paddingini sıfır yapmak isteyince olmuyor.
Display:inline basit ve mantıklı bir çözüm
Teşekkürler…
Böyle durumlarda Position belirleyerek te cozulebilir..
Evet bu bir çözümdür. Ancak padding ve margin arasında şöyle bir fark varki padding elemente uygulanan bacground içerir ama margin içermez.
Bu nedenle padding kullanılan yere göre problemin çözümü için kullanılabilir.
margin-left yerine padding-left kullasakda aynı problemle karşılaşırmıyız, yoksa bu problemin başka bir çözümümüdür?