Home/ Questions/Q 6987823
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T18:59:20+00:00

I’m designing a form layout to be uesd on many pages within an online

  • 0

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.

enter image description here

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:

enter image description here

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0