CODEWITHSUNDEEP
htmlcss
Rob Sedgwick
Rob Sedgwick

Reputation: 5226

CSS for uniform form input heights

This one always bugs me

CSS

/* reset */
input,button { 
     margin:0;padding:0;border:0;
     font-family: inherit; font-size: inherit;
     line-height:1em; }

/* apply some style */
input,button { padding:.5em; }
input { background-color:#fff; }
button { background-color:#333; color:#fff; }

/* for display example */
body { padding:3em; font-size:2em; }
div { background-color:#ccc; padding:.5em }

Markup

<div>
   <span><input type="text" value=" the input value "/></span>
   <span><button> A button</button></span>
</div>

So, Given enough width and the span enabling the inline display ...

Why are they different heights?

The above code is running here

Workarounds have been along the lines of:

1) Specify a height - fine, better if using ems, but really???

2) Wrap the elements ( like in the example, div and span ) and style the wrappers ( effectively giving the inputs/buttons some room to differ across browsers)

Hoping I have just missed a piece of css on my travels.

Most search finds on this subject point me to the workarounds

Thanks!

Upvotes: 5

Views: 1453

Answers (5)

Rob Sedgwick
Rob Sedgwick

Reputation: 5226

After receiving two great answers, it was a combination of both

1) From @Aphol regarding removing line-height or setting line-height:normal

2) From @indofraiser Using the normalise, which contains the ::-moz-focus-inner

button::-moz-focus-inner,
input::-moz-focus-inner { border: 0; padding: 0; }

The answer is a combination of the two - which works and feels great, as, after setting line-height:normal, there is still a height difference on firefox ( but it is the closest yet ) and the then the ::-moz-focus-inner mops that up.

Thanks you two - the final combo of both answers is here - http://jsfiddle.net/6xP5j/1/

Thanks again, bye bye to the workarounds! Great.

Upvotes: 1

apohl
apohl

Reputation: 1923

Removing the line-height: 1em from the button fixes it in Chrome. For Firefox, adding this fixes it:

button::-moz-focus-inner { 
    border: 0; 
    padding: 0; 
    margin-top:0px; 
    margin-bottom: 0px; 
}

This jsfiddle works in Chrome and Firefox.

Reference

Upvotes: 4

Kingisback
Kingisback

Reputation: 155

<div class="wrap clearfix>
   <span class="inputfield"><input type="text" value=" the input value "/></span>
   <span class="btn><button> A button</button></span>
</div>


.wrap{
   width:100%;
}
span.btn{
  width: 40%;
}
span.inputfield{
  width: 60%;
  display: inline-flex;

}

Upvotes: 0

indofraiser
indofraiser

Reputation: 1024

There is a CSS script called normalize.CSS (would link but on mobile). A more comprehensive version of reset. I would suggest linking to it rather than putting it in each CSS file. Try adding that, I find it gives me consistency.

Link added: http://necolas.github.io/normalize.css/

Upvotes: 1

i-CONICA
i-CONICA

Reputation: 2379

It's because while you've reset common browser defaults such as margin and padding, you've inherited the font-size, and the font size is slightly different on a button than it is for an input field.

If you specify a font-size in your button, input{} style, they'll instantly become exactly the same size.

Also, "em"s are relative, and even though you've set them to zero on the elements, they're still referenced to calculate the relative value the "em" is going to be.

So specify a font size, and don't use ems if you want absolutes and it'll become the same size.

Although the workarounds might be better in some cases.

Upvotes: 0

Related Questions