Question

My markup looks like so:

<p>
   <select></select>
   <input type="submit" id="submit" value="submit" name="submit" />
</p>

Here’s the CSS:

//No specific styles for the select element nor inherited ones.

#submit {
    background: url("images/img.png") no-repeat scroll 0 0 transparent;
    border: 1px solid #FFFAEE;
    cursor: pointer;
    height: 34px;
    margin-left: 30px;
    width: 145px;
}

The issue is the submit button is a few pixels above the select element. Here’s a screenshot:

This happens in Webkit browsers and IE but not in Firefox.

Answer 1

I copied your code into jsfiddle and the select and submit button align up nicely in ff,chrome and ie9.

http://jsfiddle.net/PTF3Q/

Apparently there’s some code you’re not supplying causing this – do you have a live url to the page?

If not, you could try: vertical-align: middle;