By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,846 Members | 1,803 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,846 IT Pros & Developers. It's quick & easy.

how to break long legend tag caption into multiple lines?

P: n/a
Hi,

We have some html source like this:

<div class="survey">
<form action="students/cbe-graduate-students/survey.html"
method="post" id="frmPbSurvey">

<fieldset class="survey_item">
<legend class="question"><span class="questionNumber">6.</span>If the
answer to question 11 is yes, do you think they provide adequate
services for advanced degree employment opportunities?</legend>

<input type="radio" name="tx_pbsurvey_pi1[7][0][0]" value="1" /
>No<br />
<input type="radio" name="tx_pbsurvey_pi1[7][0][0]" value="2" /
>Yes<br />
</fieldset>

....
<fieldset ...>
</fieldset>

</form>
</div>

Some questions are pretty long and cannot fit in the layout. My
current style sheet has,

..survey div {margin-bottom: 10px;}
..survey_item {margin-top: 10px; margin-bottom: 10px;}
..question {font-size: 100%; font-weight: bold; }

What should I so long questions can be broken into multiple lines to
fit in the layout that has 450px width?

Thanks in advance for any help,

Bing

Feb 23 '07 #1
Share this Question
Share on Google+
5 Replies


P: n/a
Scripsit du****@gmail.com:
<legend class="question"><span class="questionNumber">6.</span>If the
answer to question 11 is yes, do you think they provide adequate
services for advanced degree employment opportunities?</legend>
From the styling point of view, <legendis a nightmare. The common
rendering of <legendin browsers cannot be described in CSS terms, and CSS
settings have varying effects on it.

One of the problems is that normal wrapping does not take place, and setting
white-space: normal doesn't change this. You can insert explicit line breaks
in the markup, using <br>, but that would be awkward.

From the markup point of view, the problem of excessively long <legend>
texts should not appear. According to the HTML 4.01 specification, "The
LEGEND element allows authors to assign a caption to a FIELDSET. The legend
improves accessibility when the FIELDSET is rendered non-visually." It has,
among other things, the following example:

<FIELDSET>
<LEGEND>Current Medication</LEGEND>
Are you currently taking any medication?
<INPUT name="medication_now"
...
</FIELDSET>

So the general idea is that the legend is a short caption, or like a
low-level heading. Without context, it is of course impossible to make a
specific suggestion on the formulation. But generally, a legend that needs
to wrap (in fairly normal browsing situations) is too long and needs
reformulation.
Some questions are pretty long and cannot fit in the layout.
Just put the questions inside the <fieldsetafter the <legendelement.
.question {font-size: 100%; font-weight: bold; }
Bolding long texts is generally counter-productive, since bold text is more
difficult to read. The legend might be bolded, but the question should be
normal text so that it can be read conveniently.
What should I so long questions can be broken into multiple lines to
fit in the layout that has 450px width?
For all that you can know, 450px might not accommodate a _word_ without
wrapping. Stop imposing fixed widths, _especially_ on forms. A page with a
form is not supposed to be primarily an esthetic experience but a user
interface. Let form follow function. The user may need all the space
available.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Feb 23 '07 #2

P: n/a
On Feb 23, 2:07 am, "Jukka K. Korpela" <jkorp...@cs.tut.fiwrote:
Scripsit dub...@gmail.com:
<legend class="question"><span class="questionNumber">6.</span>If the
answer to question 11 is yes, do you think they provide adequate
services for advanced degree employment opportunities?</legend>

From the styling point of view, <legendis a nightmare. The common
rendering of <legendin browsers cannot be described in CSS terms, and CSS
settings have varying effects on it.

One of the problems is that normal wrapping does not take place, and setting
white-space: normal doesn't change this. You can insert explicit line breaks
in the markup, using <br>, but that would be awkward.

From the markup point of view, the problem of excessively long <legend>
texts should not appear. According to the HTML 4.01 specification, "The
LEGEND element allows authors to assign a caption to a FIELDSET. The legend
improves accessibility when the FIELDSET is rendered non-visually." It has,
among other things, the following example:

<FIELDSET>
<LEGEND>Current Medication</LEGEND>
Are you currently taking any medication?
<INPUT name="medication_now"
...
</FIELDSET>

So the general idea is that the legend is a short caption, or like a
low-level heading. Without context, it is of course impossible to make a
specific suggestion on the formulation. But generally, a legend that needs
to wrap (in fairly normal browsing situations) is too long and needs
reformulation.
Some questions are pretty long and cannot fit in the layout.

Just put the questions inside the <fieldsetafter the <legendelement.
.question {font-size: 100%; font-weight: bold; }

Bolding long texts is generally counter-productive, since bold text is more
difficult to read. The legend might be bolded, but the question should be
normal text so that it can be read conveniently.
What should I so long questions can be broken into multiple lines to
fit in the layout that has 450px width?

For all that you can know, 450px might not accommodate a _word_ without
wrapping. Stop imposing fixed widths, _especially_ on forms. A page with a
form is not supposed to be primarily an esthetic experience but a user
interface. Let form follow function. The user may need all the space
available.

--
Jukka K. Korpela ("Yucca")http://www.cs.tut.fi/~jkorpela/
Thanks much for the lucid explanation! Really appreciated it. Looks
like <fieldsetand <legenddoesn't fit in out situation. I changed
to <div>, all looks better now.

Bing

Feb 23 '07 #3

P: n/a
du****@gmail.com wrote:
On Feb 23, 2:07 am, "Jukka K. Korpela" <jkorp...@cs.tut.fiwrote:
>>Scripsit dub...@gmail.com:
>>From the markup point of view, the problem of excessively long <legend>
texts should not appear. According to the HTML 4.01 specification, "The
LEGEND element allows authors to assign a caption to a FIELDSET. The legend
improves accessibility when the FIELDSET is rendered non-visually." It has,
among other things, the following example:

<FIELDSET>
<LEGEND>Current Medication</LEGEND>
Are you currently taking any medication?
<INPUT name="medication_now"
...
</FIELDSET>

So the general idea is that the legend is a short caption, or like a
low-level heading. Without context, it is of course impossible to make a
specific suggestion on the formulation. But generally, a legend that needs
to wrap (in fairly normal browsing situations) is too long and needs
reformulation.
>>>Some questions are pretty long and cannot fit in the layout.

Just put the questions inside the <fieldsetafter the <legendelement.

Thanks much for the lucid explanation! Really appreciated it. Looks
like <fieldsetand <legenddoesn't fit in out situation. I changed
to <div>, all looks better now.
Then it seems as if you didn't read all of Jukka's words. What's wrong with:

<fieldset class="survey_item">
<legend class="question"><span class="questionNumber">6.</span></legend>
If the answer to question 11 is yes, do you think they provide adequate
services for advanced degree employment opportunities?
<input type="radio" name="tx_pbsurvey_pi1[7][0][0]" value="1" />No<br />
?

--
John
Feb 23 '07 #4

P: n/a
On Feb 23, 9:04 am, John Hosking <J...@DELETE.Hosking.name.INVALID>
wrote:
dub...@gmail.com wrote:
On Feb 23, 2:07 am, "Jukka K. Korpela" <jkorp...@cs.tut.fiwrote:
>Scripsit dub...@gmail.com:
From the markup point of view, the problem of excessively long <legend>
texts should not appear. According to the HTML 4.01 specification, "The
LEGEND element allows authors to assign a caption to a FIELDSET. The legend
improves accessibility when the FIELDSET is rendered non-visually." It has,
among other things, the following example:
<FIELDSET>
<LEGEND>Current Medication</LEGEND>
Are you currently taking any medication?
<INPUT name="medication_now"
...
</FIELDSET>
>So the general idea is that the legend is a short caption, or like a
low-level heading. Without context, it is of course impossible to make a
specific suggestion on the formulation. But generally, a legend that needs
to wrap (in fairly normal browsing situations) is too long and needs
reformulation.
>>Some questions are pretty long and cannot fit in the layout.
>Just put the questions inside the <fieldsetafter the <legendelement.
Thanks much for the lucid explanation! Really appreciated it. Looks
like <fieldsetand <legenddoesn't fit in out situation. I changed
to <div>, all looks better now.

Then it seems as if you didn't read all of Jukka's words. What's wrong with:

<fieldset class="survey_item">
<legend class="question"><span class="questionNumber">6.</span></legend>
If the answer to question 11 is yes, do you think they provide adequate
services for advanced degree employment opportunities?
<input type="radio" name="tx_pbsurvey_pi1[7][0][0]" value="1" />No<br />
?

--
John
Aha! Thanks much for waking me up. I got the point now. Yup, looks
like that helps fix my problem.

Bing

Feb 23 '07 #5

P: n/a
بسم الله الرحمن الرحيم
افضل موقع للتعارف بين الجنس ين الشباب والبنات من كل دول العالم
www.arabzwaj.com

بنات وشباب عايزيين يتعرفوا عليكم
صور عارية حقيقية
تعارف مجاني من كل دول العالم www.arabzwaj.com
for marrige and friend shipافضل تعارف بين الشباب والبنات موقع زواج
مجاني www.arabzwaj.com

www.arabzwaj.com افضل موقع مجاني للتعارف و للزواج الشرعي

www.arabzwaj.com بنات وشباب عايزه تتعرف عليكم

the best web site formarrige and frindship www.arabzwaj.comافضل موقع
مجاني للتعارف و للزواج
Feb 24 '07 #6

This discussion thread is closed

Replies have been disabled for this discussion.