Image <input> and table-cell display - css

Question

I have an <input> and an <input type="image"> displayed as table-cell.
I cannot figure out why the image is on a new line in WebKit-powered browsers.
This is my HTML:
<div id="search">
<div id="search_input_wrapper">
<input type="text" name="Search" id="search_input" />
<input type="image" name="Submit" id="search_submit" alt="Search" />
</div>
</div>
And this is my CSS:
div#search {
display:table;
width:100%;
table-layout:fixed;
}
div#search_input_wrapper {
display:table-row;
}
input {
display:table-cell;
margin:0;
padding:0;
border:0;
}
And here's a jsFiddle

Answer 1

This is an interesting problem that only pertains to -webkit browsers.
If you take a look at this (example), you will clearly see the problem. An input element with the property display:table-cell should normally appear on the same line, as inline elements do. You will notice that this is true if type="submit". However, if type="image", then the input elements act as block level elements, appearing on a new line.
The root of the problem lies with the property -webkit-appearance. If you were to apply -webkit-appearance:none to both input elements, you will notice they now both act the same! (example)
The default property of an input element with type="submit" is -webkit-appearance:push-button therefore we can solve the problem by applying the same property to the type="image" elements, as they normally have the property -webkit-appearance:none by default.
Problem solved, (example).
input[type="image"] {
-webkit-appearance:push-button;
}
Here is an updated example, fixing your initial problem.
I also added a src to input[type="image"], as that is the purpose of type="image".
Again, all these pertains to -webkit browsers, if you are using IE, FF or Opera, none of these example will mean anything to you, as they don't demonstrate the issue.