SitePoint Sponsor

User Tag List

Results 1 to 15 of 15

Thread: fieldset wrap?

  1. #1
    SitePoint Member
    Join Date
    May 2002
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    fieldset wrap?

    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.

  2. #2
    SitePoint Addict
    Join Date
    Dec 2002
    Posts
    386
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    please link to some your page, I'm sorry but I'm not sure I'm understanding your question

  3. #3
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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

  5. #5
    SitePoint Member
    Join Date
    May 2002
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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

  7. #7
    SitePoint Member
    Join Date
    May 2002
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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

  9. #9
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  10. #10
    SitePoint Member
    Join Date
    May 2002
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  11. #11
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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

  13. #13
    SitePoint Member
    Join Date
    May 2002
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,352
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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

  15. #15
    SitePoint Member
    Join Date
    May 2002
    Posts
    20
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    h2's sound fine. Thanks for all the help!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •