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

html css input textbox

12,470

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

12,470

Author by

gloomy.penguin

. #!/usr/bin/perl package me; # brave new world - huxley # Was and will make me ill. # I take a gramme and only am. sub exist { my $class = shift; bless {'am'=>'kim'}, $class; } sub think { my ($self,$thought) = @_; $self->{'am'} = 'ill'; } sub take { my ($self,$something) = @_; $self->{'am'} = undef if ($something =~ /gram(me)?(s)?/i); } sub am { my $self = shift; print $self->{'am'} if defined $self->{'am'}; print "\n"; } my $i = me->exist(); $i->think('was'); $i->am(); $i->think('will'); $i->am(); $i->take('gramme'); $i->am(); # now nothing

Updated on June 04, 2022

Comments

gloomy.penguin almost 2 years

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>

gloomy.penguin about 11 years

i will try using border-box but like I said in the question, using a specific height did not solve the problem.
gloomy.penguin about 11 years

oh, i'd like to have a CSS2 compatible solution... and it looks like border-box is just margins and padding. One of the solutions I'm working with is just seeing if I can find the right amount of borders and padding.
PlantTheIdea about 11 years

border-box isn't CSS3 ... it works all the way back to IE8. In fact, this exact problem was the reason it was invented.
gloomy.penguin about 11 years

answer is for @dnagirl cuz she said it first...! (and my css is extremely sloppy, btw, I was just going at it in 'full attack mode' trying to get the stupid thing to align... I hate aligning text boxes, btw)
DreaminMedia Queretaro about 11 years

actually i edited my answer, he explains what i did, i made a Fiddle. anyway, you goit it nice
gloomy.penguin about 11 years

sorry, google lead me to box-sizing (which is css3) instead of border-box. I have to support IE6 & IE7 if at all possible, though. I did try using the border-box attribute and my browser wouldn't render the whole input style with it there (using most recent version of chrome) anyway... dunno.