Form "image submit" button problem

[d0gMa]

I'm not sure if this is a css or xhtml prob, but the typical way to display a submiot button using an image is:

<input type="image" value="Search" class="search" src="" />

where the class defines the image used, the style and the padding etc etc and the value defines the text placed on top, this way, one image can be used for several submit and search buttons, just by changing the value text.

This works fine in All browsers apart from....... IE!

in IE, it sees that src="" and places a "cannot find image" logo on top of the button. If I default to using the standard:

<input type="image" value="Search" src="button.gif" />

then it works in both browsers... but no text is placed on top, meaning i would have to create many different buttons, each with different text on and save them as images.

is there another way to do this or is my code wrong?


<input type="image" value="Search" class="search" />

.search {
outline: none;
width: 107px;
height: 22px;
background-image: url(images/search.gif);
padding-left: 7px;
padding-top: 1px;
position: absolute;
color: #253e5b;
font-size: 16px;
}
// sets location for each button depending on the DIV they are in //
#regbox .search{bottom: 8px; right:8px;}
#vacbox .search{bottom: 4px; right:9px;}
#subbox .search{bottom: 6px; right:8px;}

[spikemeister]

Put the image in the

src="your image"

It will work otherwise you can make just about any element on a page clickable and work like a button.

Just insert your image and use onclick.

An example of this would be


<img src="image1.jpg" onclick="this.src = 'image2.jpg'" />


The above would simply change the image when clicked on.

[hostchecker]

That should work
http://photosnag.com/img/836/g08s1110qjdd/smileyface1.jpg

[liam.smart]

You need to give the html a path to a transparent gif. Then use CSS to add a bg image etc.