CODEWITHSUNDEEP
htmlcss
tom c
tom c

Reputation: 329

Input and Textarea styling issues

So this question has been sort of hounding me. Let's say I have two input fields and a textarea. For some reason, the spacing between the three is inconsistent. The gap between the first input to the textarea is different than that from the textarea to the second input field, no matter what I set the margin values to.

Additionally, the whitespace between the border and the start of the first character on both the input field and textarea is inconsistent, as well as the font styles applied to each. This occurs despite me using Eric Meyer's CSS reset, which I had hoped would fix the issue.

And a final issue (as it seems to never end) is that the textarea by default has a scrollbar to the side in internet explorer that I can rid by using overflow: hidden, although this creates obvious problems... Is there perhaps a cleaner solution?

HTML

 <ul>
  <li><input type="text" name="title" class="input_x" value="Title" /></li>
  <li><textarea name="description" class="textarea_x">Description</textarea></li>
  <li><input type="text" name="title" class="input_x" value="Title" /></li>
 </ul>

CSS

  .input_x, .textarea_x {
   -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
   -moz-box-sizing: border-box;    /* Firefox, other Gecko */
   box-sizing: border-box;         /* Opera/IE 8+ */
   padding: 0;
   width: 100%;
   border: 1 solid #EEFF00;
   resize: none;
  }

  ul {
   list-style: none;
   padding-left: 0;
  }

  input {
   margin: 0;
   padding: 0;
  }

http://jsfiddle.net/rY87q/

Upvotes: 2

Views: 260

Answers (2)

Ruben
Ruben

Reputation: 5095

As for the spacing add this to the CSS:

.textarea_x {
    vertical-align: middle;
}

Upvotes: 0

user2503170
user2503170

Reputation: 155

I believe that textarea { overflow: auto; } is exactly what you are looking for. It hides the scrolling bar until there is enough text to have need for the bar. This is compatible with all modern browsers so no cross-browser formatting problems. Reference

Upvotes: 1

Related Questions