IE’de Liste elemanları arasındaki boşluk sorunu
Bu sorun ile çok karşılaştım. Bir çok insanda bu sorun nedeni ile bana mesaj attı. Son mesajdan sonra konuyu yazmalıyım dedim.
Sorunumuzu tam olarak şöyle tanımlayabiliriz; Dikey olarak listelediğimiz menülerde ie’de fazladan boşluk gözüküyor. Bu durum bazen ie6′da bazense ie6 ve ie7′de oluyor.
Bir örnek verelim
<ul id="menu"> <li><a href="#">Menu Bir</a></li> <li><a href="#">Menu İki</a></li> <li><a href="#">Menu Üç</a></li> <li><a href="#">Menu Dört</a> </li> </ul>
CSS kodumuzda da
ul#menu li a{ display:block}
Örneği görmek için tıklayınız.
kodumuz olsun. Diğer tarayıcılarda normal bir görünüt alırken ie6′da liste öğeleri arasında fazladan boşluk görürüz.
Sorun İnternet Explorer’un hasLayout sorunudur. Aşağıdaki tanımlardan biri yapılması durumunda bu sorun düzelecektir.
display: inline-block
height: herhangi bir değeri
float: left veya right
*max-height: herhangi bir değeri
*max-width: herhangi bir değeri
*min-height: herhangi bir değeri
*min-width: herhangi bir değeri
*overflow: not visible
position: absolute
width: herhangi bir değeri
writing-mode: tb-rl
zoom: herhangi bir değeri
* ie7 de geçerli.
Biz bir tanesini seçelim.
* html ul#menu li a {height: 1px;}
Örneği görmek için tıklayınız.
Bu kodu yazdıktan sonra sayfa aşağıdaki gibi görünecektir.
Kaynaklar
- http://www.brunildo.org/test/IEWlispace.php
- http://www.hicksdesign.co.uk/journal/ie-whitespace-bug
- http://www.cssnewbie.com/fixing-ie6-whitespace-bug/
- http://orlandodefrias.com/2008/11/23/ie-unordered-list-extra-space-bug/
- http://archivist.incutio.com/viewlist/css-discuss/34926
- http://gtwebdev.com/workshop/gaps/white-space-bug.php
Sorunu çözdüm target blank kodlamasını link sonunda yapıyordum. a tagından sonra target blank olarak kodladım. Teşekkürler Vedat Bey. verdiğiniz cevap beni sonuca götürdü. iyi çalışamlar.
Merhaba Vedat Bey
Cevabınız için çok teşekkür ederim. Ben bu kodu biliyorum. Bir çok yerdede kullandım. Ancak tema kodları içerisinde bu kod işe yaramıyor. Yorumda yeni sayfada açmak istediğim kod html olarak kabul edildiğinden görünmemiş. Kodu resim formatında aşağıdaki linke yükledim. Bu kodu yeni sayfada açmak istiyorum. Teşekkürler.
http://4.bp.blogspot.com/_j9YTUBd9BtA/TCHgiM-YLxI…
Merhaba Fatih bey
Css hakkında hazırlamış olduğunuz e-kitap sayesinde bloğunuzu buldum. Çok faydalı bilgiler bulunuyor. Benim şöyle bir sorum olacaktı.
Yukarıda verdiğiniz örnekte
şeklinde bir koddaki linki yeni sayfada nasıl açarız acaba. Benim bloğumda da bu tip bir menü var. Bu menüdeki bazı linkleri yeni sayfada açmak istiyorum.
Hazırladığınız e-kitabı inceledim, 175. sayfada da bu konuya yakın bilgiler var ancak yeni sayfada açma için birşeyler bulamadım.
Benim temamdaki menü için bir örnek kod aşağıda var.
Yeni sayfada açmak için ne yapmam lazım. İyi çalışmalar.
Davut Naci Kaya
http://elektroinfo.blogspot.com/
Selam Davut Bey,
Fatih hocam izin verirse ben yanıt vermek isterim. Ayrıca Fatih Hocam bu bilgi için çok teşekkür ederim. Bu faydasız, arada beni çıldırtan soruna çok faydalı oldu.
Davut Bey, linki başka bir sayfada açtırmak için a tagının target property özelliğinden "_blank" atnımını kullanırsanız sorununuz hallolmuş olacaktır.
Örnek :
Saygılar.