Using an image for submit in a form borks the layout

tearing my hair out here, surely this is doable?

[fishfinger]

Imagine a form to add items to a shopping cart which sits in a background image lozenge. When the submit button is an image the display breaks. The image itself sits neatly in the background lozenge, but the <select> form elements suddenly develop a top margin of about 8 pixels. The problem still exists when this identical code is isolated in its own page. I've tried all sorts of margins (including negative ones) on the button and the <select> - I've also tried cheating by adding blank space to the button image and the background lozenge image. No matter *what* I do I just cannot get the button image to be independent of the <select> form items (or vice versa). Looks identical in IE8 and Firefox 3.

Help!

Simplified HTML :

<div class="atbbg"><form class="addtobasket">
Value 1 - &pound;price each
<select name="value1" id="value1">
<option value=''>none</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
Value 2 - &pound;price each
<select name="value2" id="value2">
<option value=''>none</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<input type="image" class="atbbutt" name="submit" src="/images/addtobasket.png">
</form></div>

Simplified CSS :

.atbbg {
margin-top:10px; margin-bottom:10px; height:25px;
background-image:url(../images/image.png);
background-repeat:no-repeat;
}
.addtobasket { margin:0px;
}
.atbbutt { margin:0px;
}

[D_Blackwell]

The image used for the submit button is going to display at actual size. this is probably affecting your other form elements. Remember, they are all in the same container. If the submit button image is too to tall, you are going to get what looks like margin-top; - when what it really is, is the extra height of the image pushing the roof up.

Test this by adding an inline style to the submit button. You may need to jigger vertical-align: as well.

<input type="image" class="atbbutt" name="submit" style="height: 24px; padding: 0; vertical-align: bottom;" src="/images/addtobasket.png">

Just a quick thought. Probably other options available.

[fishfinger]

Brilliant - just added 'vertical-align: bottom;' to the button style and that has done it.

Yes, it must be because what the image takes for a baseline is not the bottom of the text (i.e. where an underscore would go) but the middle or the top.

I never considered vertical align because I didn't think it was supported that widely, but having had another look I can see it obviously is now.

Thanks very much.