form submit image button causes alignment problems

[mj_gooner]

I have a form. if i use a button for submitting <input name="submit" type="button" /> there are no problems and the alignment is fine.

if i use <input type="image" src="images/go.gif" value="Submit" /> with the image being the same height as the containing divs the button looks like it is in the right place but the input box drops down several pixels and makes the height of the containing divs higher.

can anyone recommend a fix? i have tried adding a class to the image but it doesn't work;

<input type="image" src="images/go.gif" value="Submit" />

.go {
background-position: 0px;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
position: inherit;
}

any help would be great or i will have to go with a css button rather than the image i want to use.

cheers

[toicontien]

There's a difference in how buttons, text, form inputs and images are vertically aligned within the line box. A line box is the rectangle that makes up a line of text, essentially. The line is made up of three zones:

--------------------------------------------
1. Ascendor
--------------------------------------------
2. Middle (I always forget the correct term)
--------------------------------------------
3. Descendor
--------------------------------------------

Most letters have their bottom edge vertically aligned with the bottom of layer 2. Images ALSO have their bottom edge vertically aligned with the bottom of layer 2 (even image inputs).

Most form inputs, including buttons, are perfectly vertically aligned within the line box, with equal space above them and below them.

If you vertically align the image to the middle, then the gap beneath the image will disappear.

<input type="image"
       src="images/go.gif"
       value="Submit"
       style="vertical-align: middle;"
/>

[mj_gooner]

nice one. that does the job. thanks a lot for the advice.