Firefox ile Css Yazarken background-image Sorunu Nasıl Çözülür?

Aşağıdaki kod a href komutu ile link verme işine yarıyor. Burada link verilen şey bir resim ve linkin üzerine gelince başka bir resim çıksın isteniyor. Bu işlem için a href komutunun hover özelliğinden yararlanılıyor.
1. Html içine şu şekilde ekleniyor:

a href="#" id="linkfotograf">< / a >

2. Css komutları ise şu şekilde:

#linkfotograf
{
width:260px;
height:35px;
background-image:url(/resim/menu_fotograf.jpg);
background-repeat:no-repeat;
}
#linkfotograf:hover
{
background-image:url(/resim/menu_fotograf1.jpg);
background-repeat:no-repeat;
}

Kod yukarıdaki şekliyle Internet Explorer ile çalışıyor fakat Mozilla Firefox yada Google Chrome ile linkin olduğu yer boş görünüyor. Bunun nedeni a href komutunda resmin sığacağı gerekli boşluk sağlanmamış olmasıdır. Resim 260-35 boyutunda. Fakat biz a href> ile < /a > arasına birşey yazmadığımız için gerekli genişlik ve yükseklik oluşmamış oluyor. Bunun çözümü ise CSS kodlarında display: block; satırını eklemektir. İşte bu kadar basit. Böylece a href komutu arasında sanki bir blok varmış gibi görünecektir. Böylece resmin görünebileceği boyutlar oluşmuş olacaktır. CSS kodunun son hali şu şekilde olacaktır:

#linkfotograf
{
display: block;
width:260px;
height:35px;
background-image:url(/resim/menu_fotograf.jpg);
background-repeat:no-repeat;
}
#linkfotograf:hover
{
background-image:url(/resim/menu_fotograf1.jpg);
background-repeat:no-repeat;
}