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/
saol işime yaradı.
height: X diye CSS bilgisi girildiğinde yükseklik kesin olduğu için içine 100px boyutundaki font ile yazıda yazsanız div boyutu belirlediğini bu X kadar olacaktır. Bu dert değil ama bende sayfanın boyutuna göre div yüksekliğini firefox’da çözemedim. Firefox çok kesin CSS verileri istiyor, hataya tahammülü yok ancak ne yazıkki gerek IE tarafına özellikle yazılan virusler, gerekse IE kullanımının Windows ortamında %20 gibi makul bir değerde düşüşü insanların doğru dürüst web sitesi görmesi için webmasterları kasıyor :S dimi?
Ben de margin-bottom:-10px; verince düzeldiğini kendi kendime bulmuştum.
margin-bottom:-10px ie de sorunu halletse bile diğer tarayıcılarda sorun çıkarabilir.
@Yunus Yurttürk uyarı için teşekkürler. Kod yapısını yeni sisteme çevirdim ve ; koydum.
font-size:0 dan sonra noktalı virgül koymamışınız, belki arkadaşlar ondan çalıştıramıyordur. Kopyala yapıştır yapanlar olabilir.
benim sorunum bununla alakalı değil ama bu konuda da yardımcı olabileceğinizi düşünüyorum. div’e yazı eklediğimde 400px. olan genişlikten dışarı taşıyor, yani sağa doğru. bunun bir yolu yokmudur, yazdığım yazı 400px i geçince aşağı satıra atamaz mıyız?
Bu konuyla aslında biraz alakalı gibi ama yazcak yeri bulamadığım için buradan sorayım dedim. Bir div tagının içinde kullandığım diğer divler aşağıya doğru genişliyor fakat asıl ana div hep aynı kalıyor. İçindekilerin alt alta toplam yükseklikleri kadar otomatik olarak genişlemesini nasıl sağlayabilirim? Kendim elle boyutunu belirleyebiliyorum ama öyle de çok saçma oluyor, yardımcı olursanız sevinirim…
daha açık nasıl anlatırım bilemiyorum. İşin kısa mantığı zemin resmini tüm içeriği kapsayan katmana atayıp aynı yüksekliği sağlamak
Aksak kolona en kolay yol demişsiniz ama inanın anlamadım :S Ne yapacağımı da nasıl yapacağımı da mantığı da :)
aksak kolonlu yapıda anlattığım taktiği uygularsanız olacaktır