Additional addition in the text area

Question

There is an additional addition in my text area, but I cannot find the source of this. I put a separate code on this page:

http://jsfiddle.net/wfuks/

I can not find the source of this. It has a class field:

.field { background-color: white; width: 430px; padding: 10px; font-family:arial, sans-serif; border: 1px solid #CCC; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; } 

Any input (pun intended) would be appreciated :)

Answer 1

To prevent the cross browser from having a space below the textarea / input field, use:

 textarea, input, select { margin: 0; vertical-align: bottom; } 

(checked on your violin, works)

Oddly enough, vertical align here is the key.

Just notice, you don't need a margin: 0, because you already have *{margin:0} . For even more complete use of the cross-browser for textarea, you can also use overflow:auto; for IE and resize:none; for size supported browsers.

Additional information on why it works, how it works: Secret white space under the image tag

Answer 2

Add overflow:auto to .field_box and float:right to textarea

Demo

Your code has a float:left label, in which case the right element must have a floating right to fill in the exact available amount. otherwise you can remove the floats and achieve this using display:table-row and table-cell

---

And yes even vertical-align: bottom works.

Demo 2

Answer 3

As far as I understand, you mean registration in div class= 'field_box' . Indent to 0px in this class to remove space in the text area.

If you mean registration in the text area: make padding = 0px in the .field class