Aslında başlığı nasıl atacağımı şaşırdığım için kısa bir başlık attım.

Sorun

Sorunumuz tam olarak anlamak için daha önce anlattığım CSS ile buton yapmak adlı makaledeki görselliği arttırılmış esnek butonu örneğini incelememiz yeterli.

Genelde esnek yapılı bu tip resimli menüler veya butonları oluştururken bir elemana iki background-image atayamadığımız için iç içe iki eleman koyarız. (Sliding Door) esnek yapılar olarak adlandırılan yöntem kullandığımızda başımıza geliyor.

a {
    display:block;
    float:left;
    width:auto; background:url(cancanli_butonlar_ard.gif) 0 0 no-repeat;
    text-decoration:none;
    font-size:14px;
    font-weight:bold
}

a span {
    display:block;
    float:left; background:url(cancanli_butonlar_ard.gif) right -36px no-repeat;
    height:28px;
    width:150px;
    padding:0 20px;
    line-height:28px;
    color:#363636
}

HTML kodu

<a href="#">
	<span>Örnek Buton Metni</span>
</a>

Örneği görmek için tıklayınız.

Diğer tarayıcılarda sorun olmazken ie6 ve ie7’de el işareti yerine normal fare imleci görünüyor.

Aşağıda ie7 ve Firefox görüntüleri yanyana görünmektedir.

IE7 de buton üzerinde normal imleç görünürken Firefox ve diğer tarayıcılarda normal olarak el işareti görüntülenecektir.

Çözüm

Çözümü çok basit tabi

a span {
    display:block;
    float:left; background:url(cancanli_butonlar_ard.gif) right -36px no-repeat;
    height:28px;
    width:150px;
    padding:0 20px;
    line-height:28px;
    color:#363636;
    cursor:pointer
}

cursor:pointer özelliğini eklemek yeterli oluyor.

Bu sorunu niye yazdım? Benim gibi kod yazarken unutuyorsanız hatırlayalım diye. İşin ilginç yanı internette ufak bir araştırma yaptım ama hiç bu sorun ile karşılaşanı görmedim, belki ben tam anahtar kelimeleri bulamadım

HTML Öznitelikleri ve DOM özellikleri

**DOM (Belge Nesnesi Modeli)** HTML ile javascript'i birbirine bağlar. DOM, HTML dokümanındaki tüm elamanları ağaç yapısı mantığıyla nesn...… Devamını oku

CSS3 ile resimleri oranını koruyarak sığdırma

20 November 2017 tarihinde yayınlandı.

jQuery'ye büyük darbe Javascript ve seçiciler - 2

21 September 2017 tarihinde yayınlandı.