CSS İpuçları 14 – IE div yüksekliği sorunu
our_style {
height: 1px;
width: 100px;
background-color: black;
}
<div class="test"></div>
Bu kod Firefox’da sorunsuz çalışmasına karşın IE’de yükseklik 10px görünecektir. Bir bakıma IE boş içeriğin yüksekliğini 10px kabul ediyor, ancak bu bizim işimizi bozuyor. Çözüm ise çok basit.
.test {
font-size: 0;
height: 1px;
width: 100px;
background-color: black;
}
Sadece font-size tanımını 0 atamamız yeterli.
Kaynak: http://vaig.be/2007/04/07/div-styleheight-1px-bug-in-ie/
Henüz sorunumu çözemedim. Üç kolonlu yapım var ve üçünün de yüksekliğinin en uzuna göre olmasını istiyorum. İçeriğe göre en uzun kolon değişiyor. Css kodlarım şu şekilde.
#menu {
width:190px;
height:100%;
background-color:#FFFFFF;
float:left;
text-align:left;
font-size: 12px;
padding:5px;
/*margin:10px 10px 10px 10px;*/
}
#icerikvereklam {
width:600px;
height:680px;
float:right;
}
#icerik {
width:400px;
height:100%;
background-color:#FCE2E2;
text-align:left;
float:left;
padding:5px;*/
}
#reklam {
width:200px;
height:100%;
float:right;
background-color:#FFFFFF;
}
menü sol tarafta, içerik ortada ve reklam bölümü sağda duruyor fakat her birinin yüksekliği kendi boyutuna göre değişiyor. Ben hepsi aynı olsun ve en uzuna göre olsun istiyorum. Nasıl yapabilirim?
Tüm kolonların boyları eşit olsun istiyorum. 3 kolonlu bir yapım var. http://www.fatihhayrioglu.com/?p=197 -> Bu makalenizi henüz okumadım. Yarın denerim ve olmazsa tekrar buradan yazarım.
line-height:0; özelliği IE de işe yaramiyor diye biliyorum?
IE deki bu yukseklik problemini overflow:hidden kullanarak da cozebilirsiniz.
nasıl bir sotrun var?
Bir türlü yükseklik problemini çözemedim. Uğraşıyorum uğraşıyorum olmuyor. Sizin daha önce yazdığınız yöntemi denedim o da olmadı. Çok ilginç :S
css derslerinin devamını görmek ne güzel.
asp ile ilgili dersler vermeyi düşünüyor musunuz?
gerçekten bize faydalı olur.
ben font-size:1px yapıyordum bide line-height:1px yapıyordum.
bundan sonra 0 yaparım :)
bu arada kaynak adresi güzelmiş “vay be” gibi
evet oda başka bir yöntem
default fon yükselliği line-height:0 yapılması gerekiyordu sanırım.