HTML - Html Form Img Tag Scrolls When Clicked (?)

i have an html form that uses javascript to calculate the total price of gift cards. when i use a button for submit, everything is peachy. when i use an image to submit, the form races to the top and shows the top line of the page.

the text is enclosed within a div tag that has a set height with auto as the overflow command. i removed the height and overflow, thinking that the enclosure was causing this. nope! same thing happened.

this is the submit code:

<input type="image" src="images/buttons_contact_calculate.gif" onclick="calcard(this.form)"><input type="text" name="totalprice" size="8"><br><input type="image" src="images/buttons_contact_reset.gif" name="reset" />

the javascript code is this:

function calcard(form) {
$totalprice = 0;

if(form.card_twentyfive.checked==true){
twentyfive = (25 * form.twentyfive_no.value);
}
else {
var twentyfive = 0;
}

form.totalprice.value = twentyfive + fifty + seventyfive + onehundred + twohundred + ".00";
}

As indicated in the last line, there are five if statements including the twentyfive statement shown here for an example.

the css is this:

.text_box {
position: absolute;
top: 280px;
left: 0px;
width: 100%;
z-index: 15;
}

.text {
position: relative;
left: 0px;
top: 0px;
width: 473px;
height: 406px;
overflow: auto;
padding: 0px 30px 0px 503px;
font-size: 13px;
font-family: "arial";
font-weight: normal;
line-height: 150%;
letter-spacing: 0px;
text-align: justify;
color: #FFFFFF;
z-index: 5;
}

any ideas about what is going on?