Problem getting label's to behave

Posted on 2007-03-29
Medium Priority
Last Modified: 2008-02-01
I'm trying to create some forms on a web page. The forms consists of lines that hold a variety of select's, text input, labels, checkboxes etc. Two examples here: http://www.bitl.no/layout/layout.php and http://www.bitl.no/layout/layout2.php. css is at http://www.bitl.no/layout/layout.css

Problem for layout.php:
I'd like to get all the input fields etc. on the same line but the <label>-section at the end jumps to the next line no matter what I do.

Problem for layout2.php:
I'd like to change the labels in the columns Started and Confirmed into text input instead but as the last line shows the following data jumps to the next line.

Basically I'm wondering what is the proper way of aligning these sorts of widgets.
A specific answer to the two questions and a link to a tutorial or some text explaining this would be highly appreciated.

I'm struggling with a trial-and-error approach to this since most tutorials I find deal with specific issues and not a broader view on the topic.

PS: Examples only tested with firefox. They validate ok so should show up ok in most browsers.

Johnny Ljunggren
Question by:johnnybaluba
  • 3
  • 3
  • 2
LVL 28

Accepted Solution

TName earned 1200 total points
ID: 18815705
>Problem for layout.php...
Why do you use the label tag there (with the "for" attribute pointing to an id that doesn't exist - "statustemplate")
I think labels should be used as... labels - for adjacent form elements, e.g.:   http://www.quirksmode.org/css/forms.html
<label for="name">Name</label>
<input id="name" name="name">

You could try to use a span instead:
<span class="medium">
  <a href="http://www.bitl.no/layout/maler/todo.txt"> <img src="layout.php_files/OpenTemplate.png" alt="" border="0" height="16" width="16"> Todo2</a>
LVL 11

Assisted Solution

alexcohn earned 800 total points
ID: 18815944
The "medium" class is defined in the style sheet layout.css as "block", therefore the ToDo2 label jumps to the next row. To override the class settings, you can set for the <label> tag of the ToDo2

style="display:inline; float:none;"

Note that float style commands block display, therefore resetting one of the two is not enough.

But in general, it seems not correct to use float in your case. If you want to build a non-tabular HTML with fixed columns, you could use the style "display: inline-block;" (note that for Firefox, at least for the older versions, you should use "display: -moz-inline-block", see http://www.thismuchiknow.co.uk/?p=7) instead of "display: block; float: left;". I believe this change to label style in CSS will resolve all problems in your pages.

A tutorial of styles including floating and table replacement can be found here: http://phrogz.net/CSS/


Author Comment

ID: 18816880
TName: Good question (why use label) and the answer is lack of knowledge. I got the purpose of label, for and id now (I think).
Your solution works great for layout.php. Should I just rewrite all my labels to use span instead (ie. layout2.php still look strange)?

alexcohn: Thanks for the information and the links. I removed "display: block; float: left;" and wrote "display: -moz-inline-block; display: inline-block;" instead but now the heading all come on their own line. and the Todo2 link still appear on the next line. Can you elaborate a bit on this? I'm trying to learn these things so bear with me :)

I'm also a bit confused about the usage of p, span, div and also ul and li. I'd appreciate a line or two telling when to use one or the other.

thanks again
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

LVL 28

Assisted Solution

TName earned 1200 total points
ID: 18817403
Block elements (<div> or  <p> are usually displayed "block")  can contain other (block and/or inline) elements and will (again: usually, there are always exceptions - see float) cause a line-break.
Inline elements (e.g <span>) can only contain other inline elements and are not followed by a line-break:


About your layout2.php, I would really put all elements that belong into one line into a div (and not use labels as containers).
So if you have 3 lines of elements, you could have 3 divs, each holding (the elements that belong into that) one line, and a wrapper div containing the 3 divs...
To keep block elements in one line, you can float them left for example (or right).

Author Comment

ID: 18817834
Thank's, that cleared up a whole lot.
LVL 11

Expert Comment

ID: 18820184
To tell you the truth, I would suggest to use a table for your layout - it looks like it could suit your needs perfectly, even though the CSS purists would hate the idea. Use of <label> tag is not necessary, but it makes no harm. The way you use it without input element id that corresponds the "for" attribute of the label renders the labels useless, but it does not effect the layout. It's that block display style.

Now, it's my fault, I didn't have an updated FireFox at hand at that moment it happens that
  display: -moz-inline-block
stopped to work in v. 1.5 and was replaced (oh why???) with
  display: -moz-inline-stack;
see http://www.nczonline.net/archive/2006/10/382 for details.

As for p, span, div and also ul vs. ol, and li - see the introduction here: http://www.htmlcodetutorial.com/_UL.html - and references around.


Author Comment

ID: 18820473
Thanks for the input

I've tried tables on another similar web page I made and it somehow got ok, but I ran into a lot of issues there as well, that's why I wanted to try doing it purely through css. As I don't know the toolbox well enough I tend to do more trial and error than necessary. Learn as you go so to speak.

Your tip works but still since my use of label was not really the correct way, I'll try to rewrite the parts that use label. Haven't had a chance to read the links I've got but I assume using span and proper div's instead would do it?

LVL 11

Expert Comment

ID: 18822683
Label tag may be used inside table, div, or span tags. In HTML, some tags define the logics, and some tags define presentation. Label does not define presentation. Generally speaking, the learning curve of CSS is harder than for table-based layout, but if you want to invest in learning CSS, you will be able to build more sophisticated HTML pages.

This is the layout.php in table format:
<head profile="http://gmpg.org/xfn/11">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<base href="http://www.bitl.no/layout/" />
 <script src="/layout/calendar.js" type="text/javascript"></script>
<link href="/layout/layout.css" rel="stylesheet" type="text/css" media="screen" />
  label { display: inline; float: none; }
<div id="wrapper">
<form name="services" METHOD="get" ACTION="layout.php"><fieldset>
<table border="0"><tr><td>
<label for="service" class="mediumpluss heading">Type</label>
<label for="template" class="mediumpluss heading">Comment</label>
<label for="template3" class="medium heading">Offered</label>
<label for="template4" class="medium heading">Ordered</label>
<label for="template5" class="medium heading">Confirmed</label>
<label for="template2" class="medium heading">Template</label>
<select name="Select" class="mediumpluss">
    <option value="-1">&lt;n/a&gt;</option>
    <option value="1">Sel 1</option>
    <option value="2">Sel 2</option>
    <option value="3">Sel 3</option>
    <option value="4">Sel 4</option>
<input type="text" name="comment_1" class="mediumpluss" tabindex="2" value="" />
<input type="text" name="offer_1" class="small" tabindex="2" value="" />
<a href="javascript:servicescal1.popup();"><img src="cal.gif" style="margin-right: 0.8em" width="16" height="16" border="0" alt="" /></a>
<input type="text" name="order_1" class="small" tabindex="2" value="" />
<a href="javascript:servicescal2.popup();"><img src="cal.gif" style="margin-right: 0.8em" width="16" height="16" border="0" alt="" /></a>
<input type="text" name="confirmed_1" class="small" tabindex="2" value="" />
<a href="javascript:servicescal3.popup();"><img src="cal.gif" style="margin-right: 0.8em" width="16" height="16" border="0" alt="" /></a>
<label for="statustemplate" class="medium">
<a href="maler/todo.txt" ><img src="OpenTemplate.png" width="16" height="16" border="0" alt="" /> Todo2</a>
<script type="text/javascript">
    var servicescal1 = new calendar(document.forms['services'].elements['offer_1']);
    var servicescal2 = new calendar(document.forms['services'].elements['order_1']);
    var servicescal3 = new calendar(document.forms['services'].elements['confirmed_1']);

I believe that it is easier to read and modify. Note that you do not need to worry about column widths at all - the table takes care of the layout automatically.

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

600 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question