fieldset wrap?

**drippyzeo** · Dec 15, 2003, 16:54

I'm working on a form using css for positioning. The entire form is contained within a div...you can tell where the edges of the div are based on the image background.

As you can tell on the bottom, some of the questions, which use the fieldset tag, don't wrap at the end of the div, instead "breaking through." Is there anyway I can make the fieldset tags wrap with CSS? I tried applying a width to the element, and it didn't do anything in Internet Explorer.

**pissant** · Dec 15, 2003, 17:23

please link to some your page, I'm sorry but I'm not sure I'm understanding your question

**Zoef** · Dec 15, 2003, 17:35

Try setting a margin on the fieldset.

If that doesn't work, like pissant said, link to a page or post some (simplified) code here.

Rik

**Paul O'B** · Dec 16, 2003, 06:35

Hi,

The fieldset is stretching because your legends are too long and stretching the fieldset. The legend should be a title not a 3 line paragraph anyway.

Do something like this.

Code:

 <fieldset>
<legend>Attendance </legend>
<p><strong>Since your attendance at our program, have you taught or are you currently teaching a 
course that contains economics content?</strong></p>
etc..

However that's only a quick fix as your page has some 479 errors (if you're interested). You can't nest the fieldset inbetween the list items for valid code. You have to set them at block level in properly nested blocks.

If you want to learn more then try validating your page at the w3c site:http://validator.w3.org/

Paul

**drippyzeo** · Dec 16, 2003, 16:43

please link to some your page, I'm sorry but I'm not sure I'm understanding your question

There's a link in the first sentence of the original post, but here it is again: http://www.fte.org/questionnaire2.htm.

Paul O'B:

I only used legends and fieldsets because I'd read that that was the proper way to mark up forms from an accessibility viewpoint. I unfortunately have no say over the actual wording of questions. Do you have any suggestions for other ways to mark up the questions in a semantically correct and accessible manner?

**Paul O'B** · Dec 16, 2003, 17:19

Do you have any suggestions for other ways to mark up the questions in a semantically correct and accessible manner?

Yes exactly like I've shown you above. Whats wrong with the way I've shown?

The question makes no sense in the legend and looks silly (even when it wraps). It should be a legend not an essay. Just put a short title in the legend and then you can have the full question underneath (or above if need be).

Fieldsets and legends are a good way to group form items in a logical manner. However it needs to be valid html. You can't just make your own rules up and stick block level elements half way thougn an inline one or not close tags. That won't help anyone

. Just because you put a doctype on your page that says strict xhtml it doesn't mean that it is unless it validates.

479 errors is rather a lot of baggage to be carrying around and will only come back to bite you later on

I'm trying to be helpful here (I know it doesn't sound like it) but if you want your site to be accessible then it first needs to be correct. You need to build on a solid foundation.

My answer will solve the problem to your fieldset anyway, whether you fix the errors or not.

Hope that makes it a bit clearer.

Paul

**drippyzeo** · Dec 16, 2003, 17:24

Whats wrong with the way I've shown?

Nothing, it's just that I don't have the flexibility to put in a separate title for each question.

Great: just figured out that 200 of those errors are because Dreamweaver automatically removes the trailing slash from my input tags.

**Paul O'B** · Dec 16, 2003, 17:57

Hi,

Nothing, it's just that I don't have the flexibility to put in a separate title for each question.

Not sure what you mean there - am I missing something. If you want to keep it as it is then you will have to put line breaks in to stop the line from going off the end of the fieldset. (I'll have another look and see if theres anything else that works.)

Glad you sorted some of the errors out anyway

(DWMX is a lot better at handling xhtml.)

Paul

**Zoef** · Dec 16, 2003, 18:30

I handn't seen that link, sorry, my fault

.

Why don't you just ommit the legend and put the questions in a p tag inside the fieldset (like Paul was showing)? I would look better and I can't seen any problems accessibility wise. While you're at you could put those groups of radiobuttons in fieldsets with a legend. For those that would be the best solution.

With 497 errors you've got your work cut out, good luck!

Rik

**drippyzeo** · Dec 16, 2003, 18:32

What I meant is that I'm not the person controlling wording of the form, I'm just marking it up. So I can't just put in titles.

And yeah, a lot of the errors are hold-overs from the previous version of the questionnaire, which was definitely not valid XHTML.

I'd just copied and pasted it and hadn't even thought to run it through the validator. In any case, the validator has me down to 3 errors, though I know there are more...I've used multiple "onClick" attributes, and it only caught one. Curiously, it's not saying anything about the "fieldset" or "legend" tags being invalid.

I can't seen any problems accessibility wise.

I think the issue has something to do with the way screenreaders go through forms, though I'm not sure. I was just following the example of the page I linked earlier.

**Zoef** · Dec 16, 2003, 18:45

Valid code, semantically correct code, accessible code, and a page that renders as you want it to are all different things. But all can be achieved within the same space.

Rik

**Paul O'B** · Dec 16, 2003, 18:57

I've used multiple "onClick" attributes, and it only caught one

It does that sometimes. Once you fixed that one it will show you the next (and so on).

The fieldset and legends do validate now that you have them in the right place.

Paul

**drippyzeo** · Dec 16, 2003, 19:13

The fieldset and legends do validate now that you have them in the right place.

I didn't touch them, though. Not that I'm complaining.

**Paul O'B** · Dec 17, 2003, 03:06

I didn't touch them, though. Not that I'm complaining

It was probably one of the earlier errors (such as a missing closing tag etc) that was causing errors further on as it did highlight it when i first tested it.

Never mind now though - it's ok now

Have you decided what to do with your legend yet? You could omit the legend altogether as Zoef said. You would be able to use an h2 or h3 tag to instead of a p to give it more weight and to add more meaning. The question could be classed as a heading for the group beneath I suppose.

Paul

**drippyzeo** · Dec 17, 2003, 14:41

h2's sound fine. Thanks for all the help!

The SitePoint Forums have moved.

User Tag List

Thread: fieldset wrap?

Thread Tools

Display

fieldset wrap?

Bookmarks

Bookmarks

Posting Permissions