Solved

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

Posted on 2011-03-14
11
831 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
CSS DIV Height in Percent 1 28
Sending ASP to server side 8 33
Triple line in an alert message 4 24
HTML or/and CSS codes to construct numbered paragraphs. 5 21
This article discusses how to create an extensible mechanism for linked drop downs.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

730 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