Konu Başlığı: CSS ile hazırlanmış menü aspx içinde neden titrer ?

Menü elementleri civarlarında bir yerlerin CSS'sine display="block" koymak gerekiyor kanımca.

merhaba

Açıkcası bu titreme olayının .net ile pek bir alakası yok. IE 6 ve aşağı versiyonlarında CSS içinden tanımlanan resim dosyalarında bunu yapıyor. Kısa bir örnek ile nasıl çözeceğini açıklamaya çalışacam.

Kod:

<ul id="navigation">
 <li class="navItem1"><a href="index.aspx">Ana Sayfa</a></li>
 <li class="navItem2"><a href="hakkimizda.aspx">Hakkımızda</a></li>
</ul>

Yukarıda şekilde bir menümüz olduğunu varsayalım. Görüldüğü bu menü normalde textlerden oluşuyor. Ama biz bu menüyü CSS dosyası içinden resimlerle süsleyeceğiz.

Kod:

ul#navigation,
ul#navigation li { margin:0; padding:0}

ul#navigation li {list-style-type:none; float:left; text-indent:-9999px}

ul#navigation li a {
background-repeat:none;
display:block;
height:20px;
text-decoration:none;
} //Tüm linklerin genel alacağı değerleri burada atıyoruz.

Eğer biz direk olarak linke arka planı verirsek

Kod:

ul#navigation li.navItem1 a {
  background-image:url(/images/anasayfa_normal.gif); width:100px
} 

ul#navigation li.navItem1 a:hover {
  background-image:url(/images/anasayfa_hover.gif); 
}

titreme problemi ile karşılaşırız.

//Linklerdeki titremeyi önlemek için linkin üzerine değilde linki içine alan li ye resmin ilk hali olanarka planı veriyoruz.

Kod:

ul#navigation li.navItem1 {
  background-image:url(/images/anasayfa_normal.gif); 
} 

ul#navigation li.navItem1 a {
width:100px
} // Resim alanınn genişliğini vermeyi unutmuyoruz önemli!

//Bu kısımda ise link üzerine gelince açılacak olan resmin ikinci yani hover halini veriyoruz.

Kod:

ul#navigation li.navItem1 a:hover {
  background-image:url(/images/anasayfa_hover.gif); 
}

ve diğer linkleride bu şekilde tanımladığımızda artık IE 6.0 ve altındada problemsiz olarak çalıştığını görebileceksin. Kolay gelsin