glynn19872000
asked on
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:transpare nt;
background-image:url(layou t_images/l ogin.jpg);
border:none;
}
#top p input.login:hover{
background-image:url(layou t_images/l oginhover. jpg);
}
<p><input type="submit" class="login" name="login" value="" /></p>
#bodycontent input.submit {
width:74px;
height:26px;
background-color:transpare nt;
background-image:url(layou t_images/s ignup.jpg) ;
border:none;
}
#bodycontent input.submit:hover {
background-image:url(layou t_images/s ignuphover .jpg);
}
<p><input type="submit" class="submit" name="submit" value="" /></p>
Thankyou
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:transpare
background-image:url(layou
border:none;
}
#top p input.login:hover{
background-image:url(layou
}
<p><input type="submit" class="login" name="login" value="" /></p>
#bodycontent input.submit {
width:74px;
height:26px;
background-color:transpare
background-image:url(layou
border:none;
}
#bodycontent input.submit:hover {
background-image:url(layou
}
<p><input type="submit" class="submit" name="submit" value="" /></p>
Thankyou
Sounds like ie flicker to me. Try preloading the :hover images.
There are some good ideas here: http://www.explainth.at/en/tricks/flickfix.shtml
and there's a javascript fix here: http://snipplr.com/view/3790/js-fix--ie6-background-image-flickering/
and there's a javascript fix here: http://snipplr.com/view/3790/js-fix--ie6-background-image-flickering/
If you were visiting the page for the first time, so that the images is not cached in your browser yet, the current image disappears but the image that should be swapped with doesn't show up.
That's happening because the images havent loaded yet.
The simplest way to get iver this is to confine your rollover effects to the CSS-styled text and use the same button face image for all of the rollover states. This gives you fast, clean rollover effects, but it somewhat limits your design options.
OR you could pre-load the images. The problem is that preloading images adds to the time it takes for the page to load and appear in the visitor's browser
Perhaps the best way is to combine your graphics into one image file like this: http://builder.com.com/i/tr/techmails/Figure2.jpg.
Then change the position of the graphic with CSS.
Take a look at this example, the underlying CSS code is in View Source!
http://www.meadhra.com/cnet/040128/Button_Sample.html
That's happening because the images havent loaded yet.
The simplest way to get iver this is to confine your rollover effects to the CSS-styled text and use the same button face image for all of the rollover states. This gives you fast, clean rollover effects, but it somewhat limits your design options.
OR you could pre-load the images. The problem is that preloading images adds to the time it takes for the page to load and appear in the visitor's browser
Perhaps the best way is to combine your graphics into one image file like this: http://builder.com.com/i/tr/techmails/Figure2.jpg.
Then change the position of the graphic with CSS.
Take a look at this example, the underlying CSS code is in View Source!
http://www.meadhra.com/cnet/040128/Button_Sample.html
ASKER
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.