I'm using the following css to display a button's hover image (the normal image's css is nearly identical)

#fashion_show_info_button input:hover {
background-color:transparent;
background-image:url(http://i837.photobucket.com/albums/zz294/aaa_dev/th_cooltext432238511.png);
border:0 none;
cursor:pointer;
height:25px;
margin:0;
padding:0;
text-indent:-1000em; /Move the text away from the picture /
width:160px;
}

For some ungodly reason, though the button and its surrounding buttons all display and function perfectly in firefox and ie8, they are completely missing from the page in ie versions 7 and earlier.

Here's my page. I know it looks like shite right now in all versions of ie, but I'm only encountering this particular problem in versions <= 7 like i said. Any suggestions?

4 answers

0
points

you do know that IE doesn't do :hover on anything other than links?

(you have input:hover and only a:hover will work for old IE's)

if you have used some Javascript, then we need to know about it.

Answered over 7 years ago by Tony Crockford
0
points

I wasn't aware of that...my mistake. Still, it doesn't explain why the nearly equivalent #fashion_show_info_button input {} doesn't work, does it? That one doesn't use :hover all, yet the image is still inexplicably missing.

And no, no JavaScript used above. Is there a solution to be found using css, or do you think JavaScript is a more viable alternative?

Answered over 7 years ago by JD Wolk
0
points

it might be that IE doesn't do png as a background image, I have some vague recollection of that.

there are also IE background image bugs that you can fix by adding position:relative to the element - try that.

but the most likely explanation is that you're trying to style an input element and early versions of IE don't do it.

some info here on javascript methods:

http://www.dustindiaz.com/styling-inputs/

you could of course create the same effect, but putting the styling on a div behind the input fields

Answered over 7 years ago by Tony Crockford
danwellman 5600
0
points

There is an IE7 bug with background-images on submit buttons (<input type="submit">), not sure if that could affect other types of button maybe. It can be fixed by adding a 0px border on the button:

border: 0px solid #FFFFFF;

You may be able to fix it in IE6 & 7 by setting the input to display:inline-block; (this fixes a surprising number of issues, especially where the elements are not displayed instead of being displayed incorrrectly)

Answered over 7 years ago by danwellman