CSS: background image for submit button

Question

I created a submit button with a custom background image. But in different browsers it is different in different ways.

Almost all browsers show this correctly:

But at 2 it has an extra height:

Can anyone indicate what happened to my markup?

CSS

input[type="submit"]{ background: url(http://dl.dropbox.com/u/17055243/icons.png) -99px 0px no-repeat; width:30px; height:30px; border:none; float:left; margin:30px 0 0; cursor:pointer; } 

HTML:

 <form> <input type="text" class="placeholder" value="Search" /> <input type="submit" value="" /> </form> 

Tested:

• IE 8.0 is good
• IE 7.0 is good
• iPhone is good
• Chrome 24.0 is good
• Firefox 18.0.2 is good
• Safari 5.1 (Mac OS X 10.7.1) Good
• Opera 12.14 (Windows 7 32-bit) is good
• Safari 5.1.7 (32-bit version of Windows 7) extra height
• Opera 11.51 (Mac OS X 10.7.1) extra height

Live demo on jsfiddle .

Answer 1

Try it. This will give the correction height for the item.

 input[type="text"]{ margin:30px 0 0; width:226px; color:#999999; font-size:12px; font-style:italic; border:1px solid #cccccc; border-right:none; background-color:#ededed; float:left; height:28px; padding-right: 7px; padding-left: 7px; line-height: 28px; } 

Answer 2

It seems to me that the height of the text field is different from the submit button. Try setting the height of the text box.

Answer 3

In the second line of the search, I see the text in italics and looks a little smaller. I think the search bar adjusts to text and gets smaller, which greatly increases the search icon.

What you probably need to do is add this to the stylesheet where the placeholder is controlled:

 {font-style:normal} 

Answer 4

Submit buttons and text input fields have different default values ​​for borders, fields, indents, etc. First of all, you should put this in both submit buttons and text fields

 margin:0; padding: 0; border: none; outline: none;