html - Persistent margin and 1px height difference around input elements -


i'm having problem input elements:

problematic input elements

even though in picture css is

margin: 0; padding: 0; 

they still have slight margin can't rid of. had use negative margin of -4px button stay close text field.

also, when doing further styling end problem between firefox , chrome: submit buttons seem not have same height. setting height makes submit button fit input bar on chrome breaks on firefox , vice-versa. there seems no apparent solution.

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

in image can see in chrome (right) button , input field fit perfectly, in firefox they'll have height difference of 1px.

is there solution these 2 problems (the persistent margin , 1px difference)?


edit: i've fixed first problem, caused fact 2 elements separated newline in html code. second problem persists, though, can see here: highlighting shape of 2 elements, can see in firefox (left) button 2px taller in chrome (right) there's still difference between 2 elements

try 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. ie7 fails since obstinately shows normal button-like submit input.


Comments

Popular posts from this blog

c# - SharpSVN - How to get the previous revision? -

c++ - Is it possible to compile a VST on linux? -

url - Querystring manipulation of email Address in PHP -