CSS :hover problemi ( Internet Explorer 8 )

Merhaba arkadaşlar, yapmış olduğum bir site var,
sitenin linkini veririmde sağdan soldan laf ederler, forum kurallarını da okumadım uğraşamam bi ton onlarla, İstiyosanız özelden atarım linkini.

Neyse konuya geçelim. Ben bi Siyah-Beyaz buton hazırladım Mouse Hover yani mouse üstüne gelince hazırlamış olduğum diğer renkli buton ekrana geliyor. Firefox-chromoe-safari bu hover olunca gelen butonları önbellekte tutuyor ve 2. kez üstüne getirince tekrar yüklemiyor böylece akıcı bir görüntü oluyor.

Ancak internet explorer'da butonun üstüne getirince resiimi yüklüyor renkli olan buton geliyor, ancak çektiğimde resmi önbellekten siliyor yada ben öyle zannediyorum çünkü mouse butonun üstüne gidince tekrar resim yükleniyor.

Deliricem birisi bi akıl versin lütfen.

Link
Link


Üstteki link yazılarını görsel olarak düşünün alt alta farklı çizilmiş simetrik resimler. Bu tek bir resim olacağı için,

.classadi:hover{background-position:-100px -20px;}

şeklinde yapabilirsiniz. -100px'nini belirtir -20px boyunu belirtir. - almasının sebebi aşağıdaki görseli üstüne gelince görünmesini sağlamak. Böylece hem görseli bir kez yükletmiş olursunuz herhangi bir sorun yaşamazsınız.

hocamın dediklerini css sprite tekniği diye araştırısanız detaylı bilgiler bulabilirsiniz. Büyük Performans sağlıyor bence

Resimleri üstüne gelince tekrar yüklemek zorunda kalır..Tek resim üzerinde alta ve üste hoverlı ve hoversız hallerini koyup backgroundda ilkerkorkut'un dediği tarzda yapabilirsin.

http://css-tricks.com/css-sprites/

http://css-tricks.com/video-screenca...e-css-sprites/