CSS label vertical alignment with input fields

css forms input label alignment

16,689

Okay css alignments are slightly a black art with CSS2 so let me tell you what's happening:

1) the reset.css you have probably is NOT resetting the padding of the input element which is why you are getting that off by 1/2 pixel error

Try adding these to your style

So one thing is to remove that padding from input:

 input { padding: 0 }

You will now have to set the height of both label and input elements:

 .fld { height: 16px; }
 .usr { height: 16px; }

The other thing is that you probably want to align fields nicely one below the other. One way to achieve that is to make the label a block with float left property:

 .usr { display: block; float: left; }

and the .fld a block as well:

 .fld { display: block }

you would want to add some other parameters to p to make rendering something more aesthetic.

Here is what i did to your file:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
  <title>Southrock HTML template</title>
  <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
  <link rel="stylesheet" type="text/css" href="reset.css" />
  <style>

body {
    font-family:Verdana,Arial,"Lucida Grande","Lucida Sans Unicode",sans-serif;
    font-size:13px;
    margin:20px;
}

input {
    border:solid 1px #666;
    width:150px;
    padding: 0;
    height: 16px;
}

.fld { }

.usr {
    border:solid 1px red;
    height: 16px;
    display: block;
    float: left;
    margin-right: 5px;
    width: 7em;
}

p {
    clear: both;
    margin-bottom: 5px;
} 




</style>
</head>
<body>
<p>
    <label class="usr" for="email">Email*</label>
    <input class="fld required email" type="text" name="email" id="email" value="Capital Letter">
</p>
<p>
    <label class="usr" for="email">First Name*</label>
    <input class="fld required email" type="text" name="fname" id="fname" value="Capital Letter">
</p>
</body>
</html>

This renders the same way in IE/Safari/FF/Opera

16,689

Author by

TMA-1

Updated on June 26, 2022

Comments

TMA-1 almost 2 years
I'm designing a form layout to be uesd on many pages within an online system. A devout user of tables for this purpose for many years, I'm getting pretty used to using CSS + labels for this now.

One thing I've yet to be able to master is the way different browsers pad & position the label relative to the input field. I'll give a code example, plus a close up image of how it renders in each browser (IE = IE9).
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
  <title>HTML template</title>
  <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
  <link rel="stylesheet" type="text/css" href="reset.css" />
  <style>
body {
    font-family:Verdana,Arial,"Lucida Grande","Lucida Sans Unicode",sans-serif;
    font-size:13px;
    font-style:normal;
    font-weight:normal;
    letter-spacing:normal;
    margin:20px;
}
input {
    font-family:Verdana,Arial,"Lucida Grande","Lucida Sans Unicode",sans-serif;
    border:solid 1px #666;
    width:150px;
}
.fld {
}
.usr {
    border:solid 1px red;
}
p {
}
</style>
</head>
<body>
<p>
    <label class="usr" for="email">Email*</label>
    <input class="fld required email" type="text" name="email" id="email" value="Capital Letter">
</p>
</body>
</html>
```
OK - now I can post a pic - here is what it looks like after Ahmed Masud's changes. He was right - the reset.css file I had (from http://html5reset.org/) didn't have padding on the input element. However, even after applying the changes, there is still a variation in the alignment of the base of the text in the label compared to that in the input. Now Firefox is dead-level, and for IE & Chrome the label text is 1px higher.

If I remove the link to reset.css, things change again: Chrome becomes dead-level, IE puts the label 1px higher than the input text, Firefox 1px lower than the input text. See below:

I should point out that this is a very basic layout, simply to try and diagnose the problem. I'll be making it look all better later. But first I need to know how to make all my text line up across all browsers with one CSS solution.
TMA-1 over 12 years

Thanks for taking the time to answer - edited my original question above to include your changes. Still not getting perfect alignment unfortunately.
PerryCS almost 8 years

This is an older question but still relevant as of May 2016. The reason it worked for Ahmed in his answer and not for you is it could be because you are using a ZOOM. I find that I am currently struggling with the EXACT same problem as you. Everytime I get it perfect, in FF if I ZOOM in sometimes the label moves up. So, I adjust the CSS to push it back down, but the problem with that is the next time I change the zoom it will be off again the other way. So frustrating. I have tried many solutions and none are 100%. Also, sometimes changing the font will cause it to go out of alignment also...
TMA-1 almost 7 years

[Logs into stackoverflow for the first time in years - wow - this has had 10,000 views!] It wasn't zoom related. But that was so long ago, before bootstrap came along and made everything work across a wide range of browsers. So .. maybe I should just close this down...
Ahmed Masud almost 7 years

Hey, don't close it down. The legacy data is also useful