Persistent margin and 1px height difference around input elements

Question

I'm having a problem with input elements:

Even though in that picture their css is

margin: 0;
padding: 0;

They still have that slight margin I can't get rid of. I had to use a negative margin of -4px to get the button to stay close to the text field.

Also, when doing further styling I end up with a problem between Firefox and Chrome: submit buttons seem to not have the same height. Setting an height which makes the submit button fit together with the input bar on Chrome breaks it on Firefox and vice-versa. There seems to be no apparent solution.

1px difference between buttons http://gabrielecirulli.com/p/20110702-170721.png

In the image you can see that where in Chrome (right) the button and input field fit perfectly, in Firefox they'll have a height difference of 1px.

Is there a solution to these 2 problems (the persistent margin and the 1px difference)?

---

EDIT: I've fixed the first problem, it was caused by the fact that the two elements were separated by a newline in the html code. The second problem persists, though, as you can see here: by highlighting the shape of the two elements, you can see that in Firefox (left) the button is 2px taller than in Chrome (right)

Answer 1

Try this one: demo fiddle.

HTML:

<span><input type="text" /><input type="submit" /></span>

CSS:

span, input {
    margin: 0;
    padding: 0;
}
span {
    display: inline-block;
    border: 1px solid black;
    height: 25px;
    overflow: hidden;
}
input {
    border: none;
    height: 100%;
}
input[type="submit"] {
    border-left: 1px solid black;
}

Tested on Win7 in IE8, IE9, Opera 11.50, Safari 5.0.5, FF 5.0, Chrome 12.0. Only IE7 fails since it obstinately shows a normal button-like submit input.

Answer 2

Seems to me that your CSS is interfering, somewhere, with your inputs layout.

As you can see here http://jsfiddle.net/F3hfD/1/ what you're asking is doable without any problem.

Answer 3

For your second issue, see How to reset default button style in Firefox 4 +