converting a submit button to a graphic element

try this

<input type="image" src="./images/cart1.gif">

<input type="image" src="something.gif">

or

<button type="submit"><img src="something.gif"></button>

>> .it also seems that no matter how much i change either the height or width of the css the button doesn't change

Have you used the CSS correctly in the button ? Like this :

<input type="button" name="test" value="My Button" class="button"/>

and CSS defined within <style> tag.

Yea, the code is inserted correctly however the image button isn't behaving like the standard submit button...here's what my button looks like that's working:

<input type="Submit" class="button" name="Cart" value="Cart">

However, the image that's being applied to the button from the CSS isn't allowing me to specify the width/height....

.button
{
    background: url("./images/cart1.gif");
    border-color: #ffffff;
 
    height:100;
    width: 20;
    font-weight: none;
    font-size: 9pt;
   
   
    a.button{color:#;cursor:hand;
}

http://www.w3.org/TR/CSS21/visudet.html#the-width-property
"This property does not apply to non-replaced inline-level elements."

In this case, the width and height attributes of the inpu tag are the way to specify it:

<input type="image" src="images/cart1.gif" width="20" height="100" />

Hi,
you need just add width and height to your submit button:

<input type="Submit" class="button" name="Cart" value="Cart" width="20" height="100">

btw, you example that you post above works for me even without adding width and height properties in submit button

Maybe you want to define size of background image?

why dont you just use an image as the submit button:

<a href="javascript:document.formName.submit()"> <img src="MyImageButton.gif">< </a>

You could implement some Onmouseover and Onmouseout code to make it look like and act like a button

Just an alternative

have u read this?
https://www.experts-exchange.com/questions/21299709/converting-a-submit-button-to-a-graphic-element.html#13210711

A number of people above had good suggestions that would work but for the problem with your example is that you style is define to be used for a class called button instead of a html tag named button. get rid of the .button and just make it button.

button
{
    background: url("./images/cart1.gif");
    border-color: #ffffff;
 
    height:100;
    width: 20;
    font-weight: none;
    font-size: 9pt;
}

OR as a button 'image' with optional up and down state images
(images/submit.gif & images/submit_over.gif)
and specified button size ...

-----------------------------------
<form .....

<input type="image" src="images/submit.gif" alt="Submit Your Enquiry" style="width:210;height:54" onmouseover="this.src='images/submit_over.gif';" onmouseout="this.src='images/submit.gif';">

</form>
-----------------------------------

... simple.

Arcglide is correct placing an image inside a form like this <input type=image src=myimagebutton class="button" name="Cart" value="Cart">
 makes the image behave exactly like a submit button and you can add mouseover and mouseout events. Using an  image you can get the exact look youi want without any problems.