Geek Answers Handbook

Vertical alignment of CSS label with input fields

I am developing a form layout that will appear on many pages in an online system. A rich user of tables for this purpose for many years, I am very used to using CSS + labels for this now.

One thing that I have yet to learn is how the different browser bar positions the label relative to the input field. I will give an example of the code, as well as a large image of how it is displayed 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 - this is how it looks after Ahmed Masood has changed. He was right - the reset.css file that I had (from http://html5reset.org/ ) did not have a capital part for the input element. However, even after making the changes, there is still a difference in aligning the base of the text in the label compared to that of the input. Now Firefox is dead, and for IE and Chrome the shortcut text is 1px higher.

enter image description here

If I delete the reset.css link, everything will change again: Chrome becomes dead, IE places the label 1px higher than the input text, Firefox 1px lower than the input text. See below:

enter image description here

I must point out that this is a very simple layout, just try to diagnose the problem. I'll do it better later. But first I need to know how to make all my text strings in all browsers one CSS solution.

+7
source share
2 answers

The css alignment order is a bit black art with CSS2, so let me tell you what happens:

1) reset.css, you probably DO NOT reset the padding of the input element, so you get this with a 1/2 pixel error

Try adding them to your style.

So, you need to remove this add-on from the input:

  input { padding: 0 }

Now you will need to set the height of both the shortcuts and the input elements:

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

Another thing is that you probably want to align the fields well one after another. One way to achieve this is to make the label a block with a floating point position:

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

and .fld block:

  .fld { display: block }

you would like to add some other parameters to p to make the rendering more aesthetically pleasing.

Here is what I did with 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>

It does the same in IE / Safari / FF / Opera

+3
source

This is one way to align:

 <span> <label>Email</label> <input type="text" name="email" /> </span>

CSS

 form span { vertical-align: middle; display: block; width: 100%; } form label { display: inline-block; float: none; width: 150px; padding: 0; margin: 5px 0 0; text-align: left; } form input { display: inline-block; float: none; width:auto; margin:5px 0 0 10px; padding:5px 5px; }
0
source

More articles:


All Articles