Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

Troubleshooting
Research
Professional Opinions
Ask a Question
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

troubleshooting Question

css submit button image keeps disappearing on first hover!

Avatar of glynn19872000
glynn19872000 asked on
Web Languages and StandardsWeb DevelopmentCSS
5 Comments1 Solution2076 ViewsLast Modified:
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
ASKER CERTIFIED SOLUTION
Avatar of kingsburymedia
kingsburymediaFlag of Canada image

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Commented:
This problem has been solved!
Unlock 1 Answer and 5 Comments.
See Answers