(x)HTML/CSS - Bild som bakgrund vid mus över knapp

Jag har en simpel meny gjord med följande (x)HTML-kod:

 <ul id="navbar">
                <li><a class="rightborder" href="index.html"> Home </a></li>
                <li><a class="rightborder" href="donate.html"> Donate </a></li>
                <li><a class="rightborder" href="about.html"> About Us </a></li>
                <li><a href="contact.html"> Contact Us </a></li>
            </ul>

och CSS-kod:

#navbar         {width:947px;
                 padding:0px;
                 margin:0px;}

#navbar li      {display:inline;}

#navbar a       {width:235.75px;
                 height:40px;
                 float:left;
                 padding:0px;
                 text-align:center;
                 text-decoration:none;
                 background-color:#485e49;
                 color:#FFFFFF;
                 line-height:240%;}

.rightborder    {border-right:1px solid #FFFFFF;}

Resultat:

Nu till frågan: Hur gör jag så att när man tar musen över en knapp så får knappen i fråga en bakgrundsbild? Försökte med följande:

#navbar a:hover {background-image:url(knapp.jpg)}

Men det funkade inte, inget hände när musen gick över knappen, någon som vet hur man gör? Ni är också välkomna att påpeka i fall att jag gjort något onödigt/dumt i min CSS-kod, försöker lära mig.

Har provat med fnuttar också, var inte säker på om det skulle vara med eller utan, men det funkar ändå inte. Jag till och med copy paste:ade raden med kod du skrev, men det händer fortfarande inget när jag håller musen över knappen.

På den här bilden kan ni se att allt är som det ska, bilden ligger i rätt mapp och är rätt filtyp. Är det bara CSS som hatar mig?

Klassens syfte var att göra så att jag kunde skapa en border på alla knappar förutom den längst till höger.

Har faktiskt provat exakt det som du säger, men det funkade inte, border:n var fortfarande där på den längst till höger. Mycket som är skumt med min hemsida verkar det som XD

Testade att använda background:url(knapp.jpg); och då försvann bakgrunden helt när jag la musen över knappen, men det hände i alla fall något.

Att skapa en klass som tar bort border på den sista funkar inte för mig, med det är väl i princip samma sak som att använda pseudo-elementet last-child och det funkar inte heller.

Inte så förvånande, började lära mig (x)HTML/CSS för drygt två veckor sedan. Det är bra att du pekar ut mina misstag.

--------------------------------------------------------------------------------------------------------------------------------

Det är alltså ingen som kan se vad som är fel här? Något måste ju vara fel...

Ja, det gjorde jag. Koden kanske blev bättre, men den vill fortfarande inte visa bilden. Tog det inte som att du var besserwisser, jag bad ju till och med om att ni skulle säga till om något i koden såg konstigt ut!

-----------------------------------------------------------------------------------------------------

Nu tror jag faktiskt att jag hittat boven! Det var min trial-version av photoshop CS5.1 extended (64-bit). Knappen var gjort på 30 sec och var bara ett test för att se om det skulle funka, så jag rörde aldrig bilden efter att jag skapat den i PS, därför upptäckte jag inte detta tidigare. Men nu när jag försökte öppna den igen i PS får jag det här meddelandet:

Samma sak i Paint:

Provade att göra en ny .jpg knapp i PS, men det blir samma error. Sen provade jag med att göra .png och .psd knappar i PS istället, men det funkade inte och jag fick följande error när jag försöker öppna de:

Som sista utväg skapade jag en knapp i Paint och då funkade det!

Jag hade faktiskt ingen aning om att mitt PS skapade korrupta bilder, hade precis laddad ner det och knappen var det första jag gjorde. Ledsen att jag tog eran tid för ett problem som inte ens hade någonting med (x)HTML/CSS att göra.