Question

I have rather unusual problem. It is hard to explain, so this is address where you can take a look (web site is still in development, don’t bother with PHP errors).

Problem is following – sidebar menu (with icons, on the right, below Kategorije) is dynamically created and each li have span tag made for icons (used as background image). This is working, except for the first one (aksesoari). And this one is also working, but only 50% of the time – when it is in hover state it is working. I tried everything, but it the internet gremlins are messing around with me. Can someone see where is the problem (problem is acquiring in all browsers)?

This is CSS code for that part (sidebar menu):

span[role=kategorija]{width: 24px;height: 24px; display: inline-block;position: absolute; top: 0px; left: -30px}

.kategorija_aksesoari {background: url('../img/resursi/kategorija/crne/icons.png') no-repeat 0 0px}
.kategorija_izbor li a:hover .kategorija_aksesoari {background: url('../img/resursi/kategorija/crne/icons.png') no-repeat 0 -24px}
.kategorija_auto_moto{background: url('../img/resursi/kategorija/crne/icons.png') no-repeat -29px 0px}
.kategorija_izbor li a:hover .kategorija_auto_moto {background: url('../img/resursi/kategorija/crne/icons.png') no-repeat -29px -24px}
.kategorija_casopisi{background: url('../img/resursi/kategorija/crne/icons.png') no-repeat -58px 0px}
.kategorija_izbor li a:hover .kategorija_casopisi {background: url('../img/resursi/kategorija/crne/icons.png') no-repeat -58px -24px}
.kategorija_filatelija{background: url('../img/resursi/kategorija/crne/icons.png') no-repeat -87px 0px}
.kategorija_izbor li a:hover .kategorija_filatelija {background: url('../img/resursi/kategorija/crne/icons.png') no-repeat -87px -24px}
.kategorija_knjige{background: url('../img/resursi/kategorija/crne/icons.png') no-repeat -116px 0px}
.kategorija_izbor li a:hover .kategorija_knjige {background: url('../img/resursi/kategorija/crne/icons.png') no-repeat -116px -24px}
.kategorija_kolekcionarstvo{background: url('../img/resursi/kategorija/crne/icons.png') no-repeat 0px -53px}
.kategorija_izbor li a:hover .kategorija_kolekcionarstvo {background: url('../img/resursi/kategorija/crne/icons.png') no-repeat 0px -77px}
.kategorija_masine_alati{background: url('../img/resursi/kategorija/crne/icons.png') no-repeat -28px -53px}
.kategorija_izbor li a:hover .kategorija_masine_alati {background: url('../img/resursi/kategorija/crne/icons.png') no-repeat -28px -77px}
.kategorija_muzika_filmovi{background: url('../img/resursi/kategorija/crne/icons.png') no-repeat -57px -53px}
.kategorija_izbor li a:hover .kategorija_muzika_filmovi {background: url('../img/resursi/kategorija/crne/icons.png') no-repeat -57px -77px}
.kategorija_numizmatika{background: url('../img/resursi/kategorija/crne/icons.png') no-repeat -87px -53px}
.kategorija_izbor li a:hover .kategorija_numizmatika {background: url('../img/resursi/kategorija/crne/icons.png') no-repeat -87px -77px}
.kategorija_ostalo{background: url('../img/resursi/kategorija/crne/icons.png') no-repeat -116px -53px}
.kategorija_izbor li a:hover .kategorija_ostalo {background: url('../img/resursi/kategorija/crne/icons.png') no-repeat -116px -77px}
.kategorija_racunari_oprema{background: url('../img/resursi/kategorija/crne/icons.png') no-repeat 0px -106px}
.kategorija_izbor li a:hover .kategorija_racunari_oprema {background: url('../img/resursi/kategorija/crne/icons.png') no-repeat 0px -130px}
.kategorija_sportska_oprema{background: url('../img/resursi/kategorija/crne/icons.png') no-repeat -29px -106px}
.kategorija_izbor li a:hover .kategorija_sportska_oprema {background: url('../img/resursi/kategorija/crne/icons.png') no-repeat -29px -130px}
.kategorija_tehnika{background: url('../img/resursi/kategorija/crne/icons.png') no-repeat -58px -106px}
.kategorija_izbor li a:hover .kategorija_tehnika {background: url('../img/resursi/kategorija/crne/icons.png') no-repeat -58px -130px}
.kategorija_telefoni{background: url('../img/resursi/kategorija/crne/icons.png') no-repeat -86px -106px}
.kategorija_izbor li a:hover .kategorija_telefoni {background: url('../img/resursi/kategorija/crne/icons.png') no-repeat -86px -130px}
.kategorija_kuca_dvoriste{background: url('../img/resursi/kategorija/crne/icons.png') no-repeat -116px -106px}
.kategorija_izbor li a:hover .kategorija_kuca_dvoriste {background: url('../img/resursi/kategorija/crne/icons.png') no-repeat -116px -130px}
.kategorija_nekretnine{background: url('../img/resursi/kategorija/crne/icons.png') no-repeat -145px 0px}
.kategorija_izbor li a:hover .kategorija_nekretnine {background: url('../img/resursi/kategorija/crne/icons.png') no-repeat -145px -24px}

Answer 1

The issue is not, as suggested by others, that you need to apply the background image to the non-hover state…this has already been done.

The clue here is that the declaration for the non-hover state is the first in the list of the background images. If you change the order of them, by putting the hover state first, the non-hover state is shown and the hover state doesn’t work.

This must mean that the issue is further up in the CSS.

Having a look at the actual CSS, you will see:

.mali_oglas_izmena_selektovano {margin: 10px 0}
.mali_oglas_izmena_selektovano a {margin-right: 10px }

/
/* MALI OGLASI KATEGORIJE */

.kategorija_aksesoari {background: url('../img/resursi/kategorija/crne/icons.png') no-repeat 0 0px}
.kategorija_izbor li a:hover .kategorija_aksesoari {background: url('../img/resursi/kategorija/crne/icons.png') no-repeat 0 -24px}

Note the / before the /* MALI OGLASI KATEGORIJE */ comment? Remove this. It’s causing the next CSS declaration to fail…which happens to be the non-hover state.

P.S. Just to clarify how I worked this out – I used Google Chrome Developer Tools to view the source and play with the CSS file, on my client. It allows you to do wonderful things, like test changes in CSS and javascript without having access to the actual source.