Image <input> and table-cell display

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.