css submit button image keeps disappearing on first hover!

i have just made a button for my form and log in.
the button is two images which i change change with css :hover
however when loading the page, the first few times of hovering over my button the image completely disappears. Is there a way to ensure that the image will be replaced on the first time because i cant accept it jst disappearing how it does.

and example can be found at the website i am trying to make:
www.manchestermusicscene.co.uk
(the login system and form dont actually do anything yet it is merely a template)

here is a snippet of the css i use for each button and the corresponding html

#top p input.login{
      width:48px;
      height:19px;
      background-color:transparent;
    background-image:url(layout_images/login.jpg);
      border:none;
      }
      
#top p input.login:hover{
    background-image:url(layout_images/loginhover.jpg);
      }

<p><input type="submit" class="login" name="login" value="" /></p>

#bodycontent input.submit {
      width:74px;
      height:26px;
      background-color:transparent;
    background-image:url(layout_images/signup.jpg);
      border:none;
      }
      
#bodycontent input.submit:hover {
    background-image:url(layout_images/signuphover.jpg);
      }

<p><input type="submit" class="submit" name="submit" value="" /></p>


Thankyou