Solved

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

Posted on 2011-03-14
11
817 Views
Last Modified: 2012-05-11
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?
0
Comment
Question by:splanton
  • 4
  • 2
  • 2
  • +2
11 Comments
 
LVL 9

Expert Comment

by:mayank_joshi
ID: 35127142
try removing the width of label in css.
0
 
LVL 2

Author Comment

by:splanton
ID: 35127219
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
 
LVL 19

Expert Comment

by:Bardobrave
ID: 35127283
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
 
LVL 9

Expert Comment

by:sah18
ID: 35127600
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
 
LVL 9

Accepted Solution

by:
sah18 earned 500 total points
ID: 35127738
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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
LVL 9

Expert Comment

by:sah18
ID: 35127783
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
 
LVL 2

Author Comment

by:splanton
ID: 35127932
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
 
LVL 9

Expert Comment

by:sah18
ID: 35127969
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
 
LVL 3

Expert Comment

by:sbickerstaff
ID: 35128091
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
 
LVL 19

Expert Comment

by:Bardobrave
ID: 35128183
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
 
LVL 3

Expert Comment

by:sbickerstaff
ID: 35128246
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

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

759 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now