Getting text to wrap in a <legend>

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

Has anyone ever come across this? Here is my example page:

http://www.housing.uwaterloo.ca/index_new.php

In the poll on the right side, the question is inside a tag inside the . The problem I'm having is that the legend text will not wrap. It seems to ignore any block-level formatting such as width and display: block.

Does anyone know of any fix to this? Alternately, would it be correct to place the question inside a and leave the legend out?

While I'm at it, do you think the form results are a correct use of a table? I tried using a definition list on that but wasn't able to get the positioning right for some reason.

Thanks for any help,

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

Update: I solved the problem by putting an

tag inside the . I think that's semantically sensible, and the h5 accepts a 100% width.

Busy's picture

He has: 6,151 posts

Joined: May 2001

isn't fully supported by all browsers, use a if it's a fixed width or try contain the fieldset in a or

Just looked at your page, you don't need to use legend or fieldset there, just use div's

Tables are always right Wink

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

Setting a width on a containing div did not help. A inside the title would not be an ideal solution - first of all that's not ideal in terms of page structure. Secondly, it would have to be entered in every poll title. Thirdly, it could break the layout if text is made larger.

I am under the impression that legend and fieldset are important for proper form structure - I'll have to do some research to see if that's true or not. Adding extra div's would certainly not be appropriate (extra unnecessary divs should be avoided at all times IMO)

Will also do some research on support for - I'm assuming it's only old browsers that don't support it but I could be wrong on that...

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

WCAG recommends grouping forms with fieldset and legend: http://www.w3.org/TR/WCAG10-HTML-TECHS/#grouping

Should all forms, even with one group have a fieldset? The validator says that they must be contained in something. Fielset makes more sense than a div.

... continuing research on support for legend...

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

From what I can find out, legend is not support by Netscape 4. However, on a quick test it does diplay the text in my legend tag when it is wrapped in the

.

I haven't found anything definitive but I also haven't found anything to say that is not supported by modern browsers.

Busy's picture

He has: 6,151 posts

Joined: May 2001

I know mozilla had issues with it and Opera didn't support it some versions ago

mik-crap's picture

He has: 30 posts

Joined: Jan 2007

You're using your legend element incorrectly anyway. Legend is used to short-define a section of a fieldset. It is not meant to be used to pose a question.

<form method="post" action="index_new.php">
    <fieldset>
        <legend>Poll:</legend>
            <p><strong>State your question here, then style it. You can always set legend to display: none if you don't want the title to be shown.</strong></p>
            <input type="radio" name="option_id" value="1" id="option1" /> <label for="option1">Prospective UW Student</label>
    </fieldset>
</form>

Simply use a paragraph to state the question. The release of CSS3 and new XHTML/HTML should hopefully give us better elements (e.g. ).

Oh, and one thing. Don't replace tables with divisions. The W3C is looking to destroying div and span because it has simply replaced the non-semantic use of tables with divs. Use the appropriate HTML elements to contain your data then style that. If you find it is not working as it should, then use divs to give it a boost.

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

Well, if we're critiquing code, shouldn't a strong paragraph be a header? Wink

Do you have any documentation for what you said on legend? The spec just says that it's a caption for a fieldset. Using a shorter heading makes sense, but I wouldn't want that extra part to display, since I've already defined that with a header prior to the fieldset. Eh, okay, I guess you're right. Legend goes...

Edit:

me wrote: Alternately, would it be correct to place the question inside a and leave the legend out?

Duh (to self). I said that in the first place... and from looking at the spec that makes more sense.

What are you referring to in the last section? I definitely didn't replace any tables with div's. I do have a div wrapper around the poll, is that what you were referring to? I did that so I could apply custom formatting to that section, although I suppose I could put the id in the form. Why did you think I was replacing tables with divisions?

Where did you hear that the W3C is thiinking of destroying divisions and spans? That's interesting. I know that is depreciated in xHTML 2.0, and I personally don't have much use for span. Div's I do try to keep to a minimum but I don't see how you could eliminate them entirely.

mik-crap's picture

He has: 30 posts

Joined: Jan 2007

No it shouldn't, because a header would deduce that we are having a new section which is not applicable in forms. This is because the legend takes care of it.

I was speaking generally about replacing tables with divs. You can eliminate divs entirely if you take a while to develop your design. I have managed to use a very little amount of divs (3 or 4) on my site and it still renders well in all browsers.

I can't remember or seem to currently find the article that the W3C aims to deprecate the use of span and div in their future docs. However, I do remember that it was only an 'idea' of theirs. I will endeavour to find this article.

Megan's picture

She has: 11,421 posts

Joined: Jun 1999

I'm not surprised they are considering that. Seems inline with the general direction of xHTML 2. I also try to limit the number of div's, although I haven't had time to really optimize the code on the sites I work on. I probably spend too much time as it is figuring out what the exact proper mark-up is!

Want to join the discussion? Create an account or log in if you already have one. Joining is fast, free and painless! We’ll even whisk you back here when you’ve finished.