html - Persistent margin and 1px height difference around input elements -
i'm having problem 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)
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
Post a Comment