<input> with hover

[PHPQuack]

1. Is there another way to remove/hide the input default value, like "Submit Query" that firefox uses. Right now, I just use an empty alt="" attribute?

 

<form action="script.php" method="post">
     <div>
     <input type="image" alt="">
     </div>
</form>

 

2. To use a hover effect on the above input tag , is the only way to do that is to not specify a src for the input tag, and use a background-image instead within the css?

 

input {
    float: left;
    width: 90px;
    height: 50px;
    background-image: url(viewcart-button.png);
}

input:hover {
    background-position: 0 -50px;
}

 

3. Problem is this http://evoluent.bugeyedigital.com/ when viewed with IE5.5, 6, 7 & 8, it displays a default icon when the src attribute is not specified within the html. Is there a way to get rid of it?

 

 

[haku]

1) Are you sure it's firefox putting the default in there? I've never noticed that anywhere.

 

2) if you try to use images with inputs other than submit buttons, you will find they aren't cross browser compatible.

 

[PHPQuack]

1) Are you sure it's firefox putting the default in there? I've never noticed that anywhere.

 

 

I just doubled checked, if you do not specify a src attribute, firefox 2 uses a default alt value.

 

2) if you try to use images with inputs other than submit buttons, you will find they aren't cross browser compatible.

 

 

When you say not compatible, are you mainly referring to positions and/or hover? If hover, see below

 

That's the part that I've been having some problems with. See updated example http://evoluent.bugeyedigital.com/  I originally tried using an image for the src attribute for the view cart button, mainly wanting to get the hover effect, but ran into some issues. So I removed the src completely and used background-image instead to get the hover effect, but IE insist on displaying that icon when src is not set, so for now on the view cart button, worked around the IE problem by including a tiny transparent image for the src to get rid of the icon while keeping the background-image in the css. Hover effect does not work in IE6, but works fine with firefox. Look wise, fine on both now.

 

Now trying to figure out how to line up the add to cart buttons correctly with the 3 corresponding inline list buttons to the left of each.

 

What's is up with IE, all versions up to 8 ? I checked the rendering on browsershots.org, practically all versions of different browsers look fine, EXCEPT for all IE.