CODEWITHSUNDEEP
htmlcssinputtextbox
gloomy.penguin
gloomy.penguin

Reputation: 5911

Using CSS to change appearance of input fields causes distortion in height/width

So... the heights and widths aren't aligning once I add a border to my input fields. All text fields show some distortion when I apply a border to them....

The long, red boxes are 167 x 21 pixels.

The long, normal boxes are 168 x 23 pixels.

enter image description here

I've played around with a lot of different stylings but I can't seem to find one that always works for all my boxes. This includes playing with the font units, padding of the boxes, specifying an exact width and height, specifying margins...

Current styles: 

   input[type=text] {
       font-family:courier;
       font-size:80%; 
       padding: 0.1em;
   } 

   input.error_required { 
       border: 1px solid red; 

       font-family:courier;
       font-size:80%; 
       padding: 0.1em;
   }

I can't seem to figure out what is causing this to happen... it's not the most horrible thing in the world but I'd like to correct it, if I can.

second example: enter image description here

excessive styles that produced this: 

   input[type=text] {
      font-family: courier;
      font-size:   80%; 
      padding:     0.1em;
      height: 20px; 
      margin: 0.1em;

   } 

   .input_error_required { 
      border: 1px solid red; 
      font-family: courier;
      font-size:   80%; 
      padding:     0.1em;
      height: 20px; 
      margin: 0.1em;
   } 

   .input_error_unique { 
      border: 1px solid orange; 
      font-family: courier;
      font-size:   80%; 
      padding:     0.1em;
      height: 20px; 
      margin: 0.1em;
   }

html is just basically this repeated:

<input name='real_server_name' type='text'></input>&nbsp;&nbsp;&nbsp;<input name='real_server_ip' type='text'></input>

Upvotes: 2

Views: 12653

Answers (3)

dnagirl
dnagirl

Reputation: 20456

try setting a default border for all input boxes: 1px solid #ccc

Upvotes: 1

DreaminMedia Queretaro
DreaminMedia Queretaro

Reputation: 229

I solve this issue writing a rule for the normal style..

here yo go..

http://jsfiddle.net/wyzqV/

this is the css im using

input[type=text] {
      font-family: courier;
      font-size:   80%; 
      padding:     0px;

      margin: 5px;
      width: 167px;
      height: 22px;

   } 

.normal { 
      border: 1px solid #ccc; 
      font-family: courier;
      font-size:   80%; 
      padding:     0px;

      margin:0px;
    width: 168px;
      height: 23px;
   } 

   .input_error_required { 
      border: 1px solid red; 
      font-family: courier;
      font-size:   80%; 
      padding:     0px;

      margin:0px;
    width: 168px;
      height: 23px;
   } 

   .input_error_unique { 
      border: 1px solid orange; 
      font-family: courier;
      font-size:   80%; 
      padding:     0px;

      margin: 0px;
    width: 168px;
      height: 23px;
   }

Upvotes: 0

PlantTheIdea
PlantTheIdea

Reputation: 16359

Why not just set the height explicitly?

input[type="text"] {
    height:23px;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

The border-box stuff is to ensure that the height is reflected regardless of border. Its kind of a best practice to do it on everything, but figured I would point it out here as well.

Edit: it sounds like you actually need to apply the border-box thing more than the explicit height! I recommend both, though.

Upvotes: 0

Related Questions