CSS: stop a <p> tag wrapping under a <label>

I have a large application which relies of <label> tags to provide spacing between field headings and thier contents.

I the example below I have a <label> denoting that the content is a 'Note' and then i display the contents of an ASP field from an recordset:


<p><label>Note</label><%=(RS_SiteNote01("Note"))%></p>


The field in question happens to be 500 chars long and I get results like this:


Note      Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure d...


As you can see the text wraps under the label.

The CSS for the label <label> is:

label {
      width: 10em;
      float: left;
      margin-right: 5px;
      display: block;
      font-weight: bold;
}

Can anyone help me with a suitable css solution that doesn't involve rewriting 200+ forms?
LVL 2
splantonAsked:
Who is Participating?
 
sah18Connect With a Mentor Commented:
In re-reading your post, I believe I misunderstood what you originally want your text to look like.  It think what you meant was not what I suggested above, but that you want something that appears much like a hanging indent.

I found one possible solution on this site, which utilizes lists for this purpose.  Here is the site:
http://www.maxdesign.com.au/articles/definition/

Here is what my test page looks like:
hanging indent with lists
And here is my modified code per one of their examples:
 
<html>
<head>
<style TYPE="text/css">
<!--
dl.table-display
{
	float: left;
	width: 520px;
	margin: 1em 0;
	padding: 0;
	border-bottom: 1px solid #999;
}

.table-display dt
{
	clear: left;
	float: left;
	width: 50px;
	margin: 0;
	padding: 5px;
	border-top: 1px solid #999;
	font-weight: bold;
}

.table-display dd
{
	float: left;
	width: 450px;
	margin: 0;
	padding: 5px;
	border-top: 1px solid #999;
}

-->
</style>
</head>

<body>

<dl class="table-display"><dt>Note</dt><dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure d...</dd></dl>

</body>
</html>

Open in new window


Please let me know if this is the appearance you are wanting.  Feel free, of course to remove the borders if you do not like their look.

If this is not what you are after, please show a screenshot of what you are wanting your formatting to look like.
0
 
mayank_joshiCommented:
try removing the width of label in css.
0
 
splantonAuthor Commented:
Ummm, That is simply going to make all the forms look a total mess becuse the field contents won't align. It'You remove the width you are effectivly making the <label> redundant.

Besides the text will still wrap.
0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

 
BardobraveCommented:
mmmm.... let's try something like this:

1) Encapsulate all of your whole notes into a div, set this div to float:left, and get the float:left out of your label (out of the notes one at least)

2) Try to give height:auto and min-height:auto to your notes label (maybe you would use a name for this label to alter it's css witout modifying the rest of labels.

This "should" extend the block of your label in height til the full extension of the containing DIV,as the height of the div will come defined by it's content I think that this content will get separated from the label block.

However, maybe height:auto and min-height:auto gives you some trouble with IE.
0
 
sah18Commented:
It's your  float: left  that is causing the problem of label not being on itsown line.

If you use this instead (just removing the float: left), it will force the paragraph text onto the next line.  Your use of display: block is what accomplishes this.

 
label {
      width: 10em;
      margin-right: 5px;
      display: block;
      font-weight: bold;
}

Open in new window

0
 
sah18Commented:
Sorry for all the posts!  Here is another nice example that also may work for you.  It is Example 2 on this site:
http://www.the-art-of-web.com/css/format-dl/

0
 
splantonAuthor Commented:
Ah! looks like we are getting close (thanks sah18). Thanks so far to everyone that has made a suggestion. I was just googleing the <dl> tag and looking into it's usage.

The next (and probably most obvious) question is this: Having never explored the <dl> tag, is it a suitable and widley accepted solution for this use (In much the same way as we are now used to seeing lists used for menus).
The reason for this question is that this is a large online application and I want to maintain industry standard markup wherever possible and follow accept practise.
There is also an issue with modifying the 200+ forms currently using our old frind <label> which I will have to modify. I need to be sure I am doing the right thing and that I am not going down another markup/css cul-de-sac which will bite me later. :)

Any thoughts and opinions would be greatly appreciated.
0
 
sah18Commented:
I'm not sure I'm the best to answer about whether the dl tag is an industry standard or not, but it is certainly in wide use and is a recommended css solution for formatting quite a few things (including menus, as you mention).  I do know that the label tag is used with making your forms accessible, meaning screen readers do like the label tag (for folks with visual impairment who use screen reader software).  You could still retain the label tag nested inside of the <dd> tags, if you'd like to retain that.

Hopefully someone else with more knowledge of industry standards will weigh in.

Cheers, sah.
0
 
sbickerstaffCommented:
Don't have access to my source code at the moment but have you tried this (see code segment below) though instead of p, i normally use div and just add padding / margin to whatever suit.

For an example, see http://www.mgani.co.uk/events.php


label {
	width: 8em;
	display: inline;
	float: left;
}
.p_details {
	display: block;
	float: left;
	width: 70%;
}

Open in new window

0
 
BardobraveCommented:
As a recommendation for user accesibility you should stick with your <label> tags, but this don't means that you cannot use definition lists (<dl>) to make your forms look prettier.

Simply use <dl> tags for formatting and stick with the <label> tags surrounding form fields to maintain logical reference between fields and their labels. Maybe it will mess a bit your code (at first glance), but you'll acomplish both tasks.

Last time I used <dl> lists they widely accepted and I don't remember to had any issues with browsers.
0
 
sbickerstaffCommented:
sorry, made a mistake, should be display block for the label (use to be inline, but recent browser changes required block.  i use this and all my sites (normally) validate to AA standard
label { 
        width: 8em; 
        display: block; 
        float: left; 
} 
.p_details { 
        display: block; 
        float: left; 
        width: 70%; 
}

Open in new window

0
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.

All Courses

From novice to tech pro — start learning today.