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.
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: \[code\] 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; } \[/code\]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:
excessive styles that produced this: \[code\] 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; } \[/code\]html is just basically this repeated:\[code\]<input name='real_server_name' type='text'></input> <input name='real_server_ip' type='text'></input>\[/code\]