Re: [WSG] IE misbehaving with a list
Kay Nice idea, I had thought of that but forget to implement it, but it makes no difference anyway. I have made the changes, removing all whitespace within the containing DIV, and MSIE 5 still insists on putting some extra space in there! Any more ideas? I know I can't be the first person to hit this problem ... AS On Thu, 28 Oct 2004 13:52:55 +0800, Kay Smoljak [EMAIL PROTECTED] wrote: On Thu, 28 Oct 2004 15:43:35 +1000, Anura Samara [EMAIL PROTECTED] wrote: However, just using the basic version of the CSS rollover lists, I'm finding that MS IE 5 is adding a gap between list items if I add any font declarations anywhere eg. adding font-family and/or font-size to the containing DIV or the UL, LI or A elements. Try removing all line breaks between your list items, ie: ulliitem one/liliitem two/li/ul Cheers, K. -- Kay Smoljak http://kay.smoljak.com/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] IE misbehaving with a list
Next time I should hit Google a lot harder, and also remember who my CSS friends are! I have just found this handy tip on Andy Budd's site == http://www.andybudd.com/archives/2003/12/css_crib_sheet_1_gaps_between_vertical_nav_elements_in_ie5/ Setting the containing LI to display: inline has fixed the problem. I'm still curious about why this only matters with a font-declaration, but I have long since learnt that IE's ways are mysterious indeed! ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] How-to: Create a list with pictures / detail?
Try a definition list.
dl
dtimg //dt
ddaddress 1/dd
ddPhone number/dd
...
/dl
Float the dt to the left and clear:
dt {float:left; clear:left}
That should sort it semantically.
mike 2k:)2
marqueeblink
e-mail: [EMAIL PROTECTED]
site: http://www.webSemantics.co.uk
/marquee/blink
-Original Message-
From: Kristof Rutten [mailto:[EMAIL PROTECTED]
Sent: 27 October 2004 19:32
To: [EMAIL PROTECTED]
Subject: [WSG] How-to: Create a list with pictures / detail?
Hi,
Semantical question. I have a list of sportscenters I need to display.
I used to do this in a table layout. but how do I do this in
semantically correct CSS/XHTML ?
-
| pic1 | address1 |
-
| pic2 | address2 |
.
.
.
| pic x | addressx |
I've been thinking about floating left and right, seperate divs /
spans, ...
just don't know the best solution.
Anyone with ideas ?
Regards, .K
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
**
This email and any files transmitted with it are confidential and
intended solely for the use of the individual or entity to whom they
are addressed. If you have received this email in error please notify
the system manager.
This footnote also confirms that this email message has been swept by
MIMEsweeper for the presence of computer viruses.
www.mimesweeper.com
**
**
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list getting help
**
RE: [WSG] two column IE issues - SOLVED
Hi, I'm having difficulties with that IE shift bug thing. The one where the content moves when you hover over a link. I've tried adding _height:100%; _line-height:100%; _width:100% To every element in the div to no avail. Example here: http://www.websemantics.co.uk/workshop/sessions/session2/ Hover over any Activity link and the div box changes proportions. Hover over a footer link and it changes back. Are there any solutions to this? Cheers. mike 2k:)2 marqueeblink e-mail: [EMAIL PROTECTED] site: http://www.webSemantics.co.uk /marquee/blink ** This email and any files transmitted with it are confidential and intended solely for the use of the individual or entity to whom they are addressed. If you have received this email in error please notify the system manager. This footnote also confirms that this email message has been swept by MIMEsweeper for the presence of computer viruses. www.mimesweeper.com ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] RE: Content moves on hover in IE
Hi, I'm having difficulties with that IE shift bug thing. The one where the content moves when you hover over a link. I've tried adding _height:100%; _line-height:100%; _width:100% To every element in the div to no avail. Example here: http://www.websemantics.co.uk/workshop/sessions/session2/ Hover over any Activity link and the div box changes proportions. Hover over a footer link and it changes back. Are there any solutions to this? Cheers. mike 2k:)2 marqueeblink e-mail: [EMAIL PROTECTED] site: http://www.webSemantics.co.uk /marquee/blink ** This email and any files transmitted with it are confidential and intended solely for the use of the individual or entity to whom they are addressed. If you have received this email in error please notify the system manager. This footnote also confirms that this email message has been swept by MIMEsweeper for the presence of computer viruses. www.mimesweeper.com ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] Shifting
I had that same problem with I IE6. I switched from % to pix in vertical padding and margins and it took care of the problem. I'm having difficulties with that IE shift bug thing. The one where the content moves when you hover over a link. I've tried adding _height:100%; _line-height:100%; _width:100% To every element in the div to no avail. -- Get Firefox Browser http://www.spreadfirefox.com/?q=affiliatesamp;id=6908amp;t=58 Bennie's MIDI Page http://bennieshepherd.com/ Athens, Georgia, Relay For Life http://www.athensrelay.net/ Montrose, Colorado, Relay For Life http://montroserelay.com/ Grand Junction, Colorado, Relay For Life http://grandjunctionrelay.org LZ Friendly Veterans Org http://lzfriendly.org ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Shifting
Thanks Bennie, That's saved hours of work. Just changing vertical %'s to em's. It seems to be working. mike 2k:)2 marqueeblink e-mail: [EMAIL PROTECTED] site: http://www.webSemantics.co.uk /marquee/blink -Original Message- From: Bennie Shepherd [mailto:[EMAIL PROTECTED] Sent: 28 October 2004 09:34 To: [EMAIL PROTECTED] Subject: [WSG] Shifting I had that same problem with I IE6. I switched from % to pix in vertical padding and margins and it took care of the problem. I'm having difficulties with that IE shift bug thing. The one where the content moves when you hover over a link. I've tried adding _height:100%; _line-height:100%; _width:100% To every element in the div to no avail. -- Get Firefox Browser http://www.spreadfirefox.com/?q=affiliatesamp;id=6908amp;t=58 Bennie's MIDI Page http://bennieshepherd.com/ Athens, Georgia, Relay For Life http://www.athensrelay.net/ Montrose, Colorado, Relay For Life http://montroserelay.com/ Grand Junction, Colorado, Relay For Life http://grandjunctionrelay.org LZ Friendly Veterans Org http://lzfriendly.org ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** This email and any files transmitted with it are confidential and intended solely for the use of the individual or entity to whom they are addressed. If you have received this email in error please notify the system manager. This footnote also confirms that this email message has been swept by MIMEsweeper for the presence of computer viruses. www.mimesweeper.com ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] WE04 Summary (blowing my own trumpet)
I did not attend this conference and I read the article listed below. Maybe I am missing something. 1. Where can I find a good example of how forms should be laid out for accessibility. 2.Comment on div tags. If we are not suppose to use tables for layoutand div tags are supposed to be used with restraint. What other options with layout are there? Nancy JohnsonJason Foss [EMAIL PROTECTED] wrote: Greetings!I penned a bit of a summary of some of the things I learned at WE04,and Sitepoint have published it!http://www.sitepoint.comor straight to the article:http://www.sitepoint.com/article/essentials-modern-web-designDid I miss anything imprtant? Well, it's too late now if I did, but Ithink I covered mostly everything within the scope of the article.(Not everything at the conference mind you!)-- Jason FossAlmost Anything Desktop Publishingwww.almost-anything.com.auWindows Messenger: [EMAIL PROTECTED]North Rockhampton, Queensland, Australia"We can do almost anything!"**The discussion list for http://webstandardsgroup.org/See http://webstandardsgroup.org/mail/guidelines.cfmfor some hints on posting to the list getting help**__Do You Yahoo!?Tired of spam? Yahoo! Mail has the best spam protection around http://mail.yahoo.com
RE: [WSG] WE04 Summary (blowing my own trumpet)
Hi Nancy, Any of the positioning rules which you apply to div tags can also be applied to any other block level element like headings, paragraphs, lists, and so on even images if you define them as block elements in your style sheet. Simply position the block element itself you dont need to wrap it in a div first unless youre grouping more than one element. Hope that makes sense! Aaron Pollock From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Nancy Johnson Sent: 28 October 2004 14:49 To: [EMAIL PROTECTED] Subject: Re: [WSG] WE04 Summary (blowing my own trumpet) I did not attend this conference and I read the article listed below. Maybe I am missing something. 1. Where can I find a good example of how forms should be laid out for accessibility. 2.Comment on div tags. If we are not suppose to use tables for layoutand div tags are supposed to be used with restraint. What other options with layout are there? Nancy Johnson Jason Foss [EMAIL PROTECTED] wrote: Greetings! I penned a bit of a summary of some of the things I learned at WE04, and Sitepoint have published it! http://www.sitepoint.com or straight to the article: http://www.sitepoint.com/article/essentials-modern-web-design Did I miss anything imprtant? Well, it's too late now if I did, but I think I covered mostly everything within the scope of the article. (Not everything at the conference mind you!) -- Jason Foss Almost Anything Desktop Publishing www.almost-anything.com.au Windows Messenger: [EMAIL PROTECTED] North Rockhampton, Queensland, Australia We can do almost anything! ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** __ Do You Yahoo!? Tired of spam? Yahoo! Mail has the best spam protection around http://mail.yahoo.com
Re: [WSG] WE04 Summary (blowing my own trumpet)
1. Where can I find a good example of how forms should be laid out for accessibility. Try these: http://www.d.umn.edu/itss/support/Training/Online/webdesign/accessibility.ht ml#forms http://www.nils.org.au/ais/web/resources/WSG_Oct_04/toc.html 2. Comment on div tags. If we are not suppose to use tables for layout and div tags are supposed to be used with restraint. What other options with layout are there? Are you referring to this: 7. div and span elements have no real semantic meaning, so use them judiciously. I'm not saying don't use them, but if there is another element that explains the content, use it instead! This seems to be talking more about the direct mark-up of content than overall positioning. With marking up content, the aim is to use the most correct elements (the element that has the most meaning) where possible and use divs only if needed. With overall layout, the aim is to get away from tables and unnecessary divs - there may be times when you can position an element directly. For example: If you use a ul for your navigation, you may not need to place the ul inside a div - you could apply positioning style to the ul directly. However, if the nav also needed other elements, you would probably need to wrap them all in a div and position that. Russ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] WE04 Summary (blowing my own trumpet)
From: Nancy Johnson 1. Where can I find a good example of how forms should be laid out for accessibility. Two decent ones: http://www.webaim.org/techniques/forms/ http://www.accessify.com/tutorials/better-accessible-forms.asp 2. Comment on div tags. If we are not suppose to use tables for layout and div tags are supposed to be used with restraint. What other options with layout are there? What other options do you need? A lot of people switching from table based to tableless end up wrapping all sorts of things in divs (and assigning hundreds of classes, rather than taking advantage of all other types of selectors, and overusing spans) when it's not necessary. For instance: a lot of elements are already block containers by default, so there's no point in wrapping them up in an extra div to float them or position them. e.g. instead of something like this div id=navigation ul li.../li li.../li li.../li /ul /div you can just do ul id=navigation li.../li li.../li li.../li /ul And even if elements are not block level by nature, they can be forced to display as such with display: block in CSS. Hmm...just seen that Aaron already replied while I was still typing, pretty much saying the same thing...but what the heck, I've wrote this much, I'm going to send it anyway ;) Patrick Patrick H. Lauke Webmaster / University of Salford http://www.salford.ac.uk ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] How-to: Create a list with pictures / detail?
Sorry Patrick, Yes I was stating the image is a data object which comprised of many individual characteristics (data definitions), sorta XML stylie. I was also suggesting that Phone number was not necessarily attached to the address, but definitely attached to the image. dl dtimg ... alt=image of house //dt ddaddressPhysical address/address/dd ddPhone number/dd ... /dl Am I incorrect in this belief? mike 2k:)2 marqueeblink e-mail: [EMAIL PROTECTED] site: http://www.webSemantics.co.uk /marquee/blink -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Sent: 28 October 2004 14:41 To: [EMAIL PROTECTED]; Mike Foskett Cc: [EMAIL PROTECTED] Subject: RE: [WSG] How-to: Create a list with pictures / detail? Quoting Mike Foskett Try a definition list. dl dtimg //dt ddaddress 1/dd ddPhone number/dd ... /dl Not too sure about this, as the multiple DDs would imply separate, independent definitions that all refer to the image (whereas an address needs to be grouped together, and each lines is not independent from the other lines. Patrick H. Lauke ** This email and any files transmitted with it are confidential and intended solely for the use of the individual or entity to whom they are addressed. If you have received this email in error please notify the system manager. This footnote also confirms that this email message has been swept by MIMEsweeper for the presence of computer viruses. www.mimesweeper.com ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] How-to: Create a list with pictures / detail?
From: Mike Foskett Sorry Patrick, Yes I was stating the image is a data object which comprised of many individual characteristics (data definitions), sorta XML stylie. I was also suggesting that Phone number was not necessarily attached to the address, but definitely attached to the image. dl dtimg ... alt=image of house //dt ddaddressPhysical address/address/dd ddPhone number/dd ... /dl Am I incorrect in this belief? Ah, sorry, my mistake Mike...quickly reading over your message, I thought you were suggesting something like ddAddress line1/dd ddAddress line2/dd ddCity/dd ddPostcode/dd etc. No, of course, your belief is correct. ...although, once you start having a list of 2 or more distinct things that are related to each other, I'd almost suggest actually using a data table (and possibly using css to hide the table head) table thead tr th scope=colPhotograph/th th scope=colAddress/th th scope=colTelephone/th /tr /thead tbody tr tdimg ...//td tdaddress.../address/td tdtel no./td /tr ... /tbody /table Patrick Patrick H. Lauke Webmaster / University of Salford http://www.salford.ac.uk ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Help with fieldset in a li
Firstly, am I using fieldset and legend in the correct semantic manner? My understanding is that fieldset is meant to group all the similar form elements together, not to diferentiate each input.A group of numbered questions are all related to each other, and the entire thing should be in one fieldset with one legend. If you were to add a second group of numbered questions starting the numbers over again because they are related to each other, but not to the first group of numbered questions, then you would use a second fieldset and legend. (a new one, not nested) At least this is how I've interepreted and used the fieldset. An everyday example is a login form. The fieldset goes around the username and password text boxes as well as the radio button for remembering your password, with the legend on the login text. Any other fields like submitting for a lost password would be in a separate fieldset with new legend of forgotten password. -- Susan R. Grossman [EMAIL PROTECTED] ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] WE04 Summary (blowing my own trumpet)
Try this: Accessible usable forms: Guidelines, examples and JavaScript tricks. http://www.websemantics.co.uk/tutorials/form_guidelines/ mike 2k:)2 marqueeblink e-mail: [EMAIL PROTECTED] site: http://www.webSemantics.co.uk /marquee/blink -Original Message- From: Patrick Lauke [mailto:[EMAIL PROTECTED] Sent: 28 October 2004 15:08 To: [EMAIL PROTECTED] Subject: RE: [WSG] WE04 Summary (blowing my own trumpet) From: Nancy Johnson 1. Where can I find a good example of how forms should be laid out for accessibility. Two decent ones: http://www.webaim.org/techniques/forms/ http://www.accessify.com/tutorials/better-accessible-forms.asp 2. Comment on div tags. If we are not suppose to use tables for layout and div tags are supposed to be used with restraint. What other options with layout are there? What other options do you need? A lot of people switching from table based to tableless end up wrapping all sorts of things in divs (and assigning hundreds of classes, rather than taking advantage of all other types of selectors, and overusing spans) when it's not necessary. For instance: a lot of elements are already block containers by default, so there's no point in wrapping them up in an extra div to float them or position them. e.g. instead of something like this div id=navigation ul li.../li li.../li li.../li /ul /div you can just do ul id=navigation li.../li li.../li li.../li /ul And even if elements are not block level by nature, they can be forced to display as such with display: block in CSS. Hmm...just seen that Aaron already replied while I was still typing, pretty much saying the same thing...but what the heck, I've wrote this much, I'm going to send it anyway ;) Patrick Patrick H. Lauke Webmaster / University of Salford http://www.salford.ac.uk ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** This email and any files transmitted with it are confidential and intended solely for the use of the individual or entity to whom they are addressed. If you have received this email in error please notify the system manager. This footnote also confirms that this email message has been swept by MIMEsweeper for the presence of computer viruses. www.mimesweeper.com ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
[WSG] List item background disappears in IE6
On the site I'm currently working on, the link image for the farthest right item (Photo Albums) won't load in IE6, however the block dimensions for the a tag still show up and don't seem to be reduced at all. The logo is a background for the overlay div, and is located beneath the ul's container. The two divs overlap slightly, but I didn't think this would cause a problem. page: http://extrablack.com/test/psycsci/index.html css: http://extrablack.com/test/psycsci/css/general.css http://extrablack.com/test/psycsci/css/ie5pluswin.css What's causing this? Is there a better way to go about that layout than what I've done? -Ryan Christie [EMAIL PROTECTED] ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] Help with fieldset in a li
Firstly, am I using fieldset and legend in the correct semantic manner? Fieldset and legend elements are useful for explicitly identifying groups of form controls and assigning a label [legend] that relates to a group of controls. The example of their use you provided looks fine. Fieldsets can also be nested to identify sub-groups there are a few examples (with code) of their use here: http://www.nils.org.au/ais/web/resources/WSG_Oct_04/slide16.html with regards Steven Faulkner Web Accessibility Consultant National Information Library Service (NILS) 454 Glenferrie Road Kooyong Victoria 3144 Phone: (613) 9864 9281 Fax: (613) 9864 9210 Email: [EMAIL PROTECTED] National Information Library Service A subsidiary of RBS.RVIB.VAF Ltd. Damian Sweeney [EMAIL PROTECTED]To: [EMAIL PROTECTED] .edu.au cc: Sent by: Subject: [WSG] Help with fieldset in a li [EMAIL PROTECTED] group.org 28/10/2004 01:25 PM Please respond to wsg Hi folks, I'm having some trouble with a series of questions in a questionnaire that I'd like to put in an ordered list. I'd like to use fieldset and legend to mark up each question, thereby separating them easily for people with assistive devices. However, I'd also like to keep the original look and feel pre-fieldset for 'unassisted' users. An example of the differences can be found at : http://members.iinet.net.au/~damianfs/sample.html Safari and Opera 7.5 on the Mac seem to handle this conversion well, but Firefox and IE tend to put the list marker under level of the legend. So, a couple of questions: Firstly, am I using fieldset and legend in the correct semantic manner? Secondly, if I am using it correctly, are there suggestions for fixing the display in Firefox and IE? Many thanks, Damian -- Damian Sweeney Instructional Designer, AIRport Project Equity, Language and Learning Programs University of Melbourne 723 Swanston St Parkville 3010 www.services.unimelb.edu.au/ellp/ ph 03 8344 9370, fax 03 9349 1039 This email and any attachments may contain personal information or information that is otherwise confidential or the subject of copyright. Any unauthorised use, disclosure or copying of any part of it is prohibited. The University does not warrant that this email or any attachments are free from viruses or defects. Please check any attachments for viruses and defects before opening them. If this email is received in error please delete it and notify us by return email or by phoning (03) 8344 9370. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Help with fieldset in a li
One benefit of using fieldset and legend for screen reader users is that nearly all readers will read the legend before every input label within a fieldset. This can be very helpful with forms that require the same information within different sections of the form. For example, if you need put in name, phone number etc for a number of different people, the form input labels for each person will be the same - the layout of the form may make the different sections of the form obvious for visual users of the site, but the difference may not be obvious if you can't see. However, when you use fieldset and legend (with say a legend of purchaser for one person) then the reader will read the labels within this fieldset as purchaser name, purchaser phone number etc. An article with some more information about form accessibility can be found at http://www.usability.com.au/resources/forms.cfm Hope this is helpful Roger -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Behalf Of Susan R. Grossman Sent: Friday, 29 October 2004 1:28 AM To: [EMAIL PROTECTED] Subject: Re: [WSG] Help with fieldset in a li Firstly, am I using fieldset and legend in the correct semantic manner? My understanding is that fieldset is meant to group all the similar form elements together, not to diferentiate each input.A group of numbered questions are all related to each other, and the entire thing should be in one fieldset with one legend. If you were to add a second group of numbered questions starting the numbers over again because they are related to each other, but not to the first group of numbered questions, then you would use a second fieldset and legend. (a new one, not nested) At least this is how I've interepreted and used the fieldset. An everyday example is a login form. The fieldset goes around the username and password text boxes as well as the radio button for remembering your password, with the legend on the login text. Any other fields like submitting for a lost password would be in a separate fieldset with new legend of forgotten password. -- Susan R. Grossman [EMAIL PROTECTED] ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Help with fieldset in a li
I notice that some people nest the input within the legend whereas I don't: Example: label for=nameName:br / input type=text name=name id=name size=55 //label or mine: label for=nameName:/labelbr / input type=text name=name id=name size=55 / Does it make any difference? The ID ties them together anyway so I think not. P -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Web Usability Sent: Friday, October 29, 2004 9:35 AM To: [EMAIL PROTECTED] Subject: RE: [WSG] Help with fieldset in a li One benefit of using fieldset and legend for screen reader users is that nearly all readers will read the legend before every input label within a fieldset. This can be very helpful with forms that require the same information within different sections of the form. For example, if you need put in name, phone number etc for a number of different people, the form input labels for each person will be the same - the layout of the form may make the different sections of the form obvious for visual users of the site, but the difference may not be obvious if you can't see. However, when you use fieldset and legend (with say a legend of purchaser for one person) then the reader will read the labels within this fieldset as purchaser name, purchaser phone number etc. An article with some more information about form accessibility can be found at http://www.usability.com.au/resources/forms.cfm Hope this is helpful Roger -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Behalf Of Susan R. Grossman Sent: Friday, 29 October 2004 1:28 AM To: [EMAIL PROTECTED] Subject: Re: [WSG] Help with fieldset in a li Firstly, am I using fieldset and legend in the correct semantic manner? My understanding is that fieldset is meant to group all the similar form elements together, not to diferentiate each input.A group of numbered questions are all related to each other, and the entire thing should be in one fieldset with one legend. If you were to add a second group of numbered questions starting the numbers over again because they are related to each other, but not to the first group of numbered questions, then you would use a second fieldset and legend. (a new one, not nested) At least this is how I've interepreted and used the fieldset. An everyday example is a login form. The fieldset goes around the username and password text boxes as well as the radio button for remembering your password, with the legend on the login text. Any other fields like submitting for a lost password would be in a separate fieldset with new legend of forgotten password. -- Susan R. Grossman [EMAIL PROTECTED] ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Help with fieldset in a li
Thanks to Susan, Steven and Roger for the replies so far. A couple of questions for clarification: * If no fieldset is used for the individual questions, how does a screen reader associate the question with the radio group? The label will differentiate the options, but what about the questions? * It sounds like a long legend is a bad idea - correct? * In a page where there is only one form and one semantically linked set of form controls is a fieldset necessary/desirable? * If fieldsets are nested, how does a screen reader handle the legends? Are they concatenated for each form control or is only the legend from the parent fieldset used? Cheers, Damian One benefit of using fieldset and legend for screen reader users is that nearly all readers will read the legend before every input label within a fieldset. This can be very helpful with forms that require the same information within different sections of the form. For example, if you need put in name, phone number etc for a number of different people, the form input labels for each person will be the same - the layout of the form may make the different sections of the form obvious for visual users of the site, but the difference may not be obvious if you can't see. However, when you use fieldset and legend (with say a legend of purchaser for one person) then the reader will read the labels within this fieldset as purchaser name, purchaser phone number etc. An article with some more information about form accessibility can be found at http://www.usability.com.au/resources/forms.cfm Hope this is helpful Roger -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Behalf Of Susan R. Grossman Sent: Friday, 29 October 2004 1:28 AM To: [EMAIL PROTECTED] Subject: Re: [WSG] Help with fieldset in a li Firstly, am I using fieldset and legend in the correct semantic manner? My understanding is that fieldset is meant to group all the similar form elements together, not to diferentiate each input.A group of numbered questions are all related to each other, and the entire thing should be in one fieldset with one legend. If you were to add a second group of numbered questions starting the numbers over again because they are related to each other, but not to the first group of numbered questions, then you would use a second fieldset and legend. (a new one, not nested) At least this is how I've interepreted and used the fieldset. An everyday example is a login form. The fieldset goes around the username and password text boxes as well as the radio button for remembering your password, with the legend on the login text. Any other fields like submitting for a lost password would be in a separate fieldset with new legend of forgotten password. -- Susan R. Grossman [EMAIL PROTECTED] -- Damian Sweeney Instructional Designer, AIRport Project Equity, Language and Learning Programs University of Melbourne 723 Swanston St Parkville 3010 www.services.unimelb.edu.au/ellp/ ph 03 8344 9370, fax 03 9349 1039 This email and any attachments may contain personal information or information that is otherwise confidential or the subject of copyright. Any unauthorised use, disclosure or copying of any part of it is prohibited. The University does not warrant that this email or any attachments are free from viruses or defects. Please check any attachments for viruses and defects before opening them. If this email is received in error please delete it and notify us by return email or by phoning (03) 8344 9370. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Help with fieldset in a li
In my opinion your approach is the most appropriate. Label for should be used for labels. And, the ID associates the input with that label. However in relation to legend, a whole bunch of labels and inputs can be presented within one legend. Roger -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Behalf Of Peter Firminger Sent: Friday, 29 October 2004 10:21 AM To: [EMAIL PROTECTED] Subject: RE: [WSG] Help with fieldset in a li I notice that some people nest the input within the legend whereas I don't: Example: label for=nameName:br / input type=text name=name id=name size=55 //label or mine: label for=nameName:/labelbr / input type=text name=name id=name size=55 / Does it make any difference? The ID ties them together anyway so I think not. P -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Web Usability Sent: Friday, October 29, 2004 9:35 AM To: [EMAIL PROTECTED] Subject: RE: [WSG] Help with fieldset in a li One benefit of using fieldset and legend for screen reader users is that nearly all readers will read the legend before every input label within a fieldset. This can be very helpful with forms that require the same information within different sections of the form. For example, if you need put in name, phone number etc for a number of different people, the form input labels for each person will be the same - the layout of the form may make the different sections of the form obvious for visual users of the site, but the difference may not be obvious if you can't see. However, when you use fieldset and legend (with say a legend of purchaser for one person) then the reader will read the labels within this fieldset as purchaser name, purchaser phone number etc. An article with some more information about form accessibility can be found at http://www.usability.com.au/resources/forms.cfm Hope this is helpful Roger -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Behalf Of Susan R. Grossman Sent: Friday, 29 October 2004 1:28 AM To: [EMAIL PROTECTED] Subject: Re: [WSG] Help with fieldset in a li Firstly, am I using fieldset and legend in the correct semantic manner? My understanding is that fieldset is meant to group all the similar form elements together, not to diferentiate each input.A group of numbered questions are all related to each other, and the entire thing should be in one fieldset with one legend. If you were to add a second group of numbered questions starting the numbers over again because they are related to each other, but not to the first group of numbered questions, then you would use a second fieldset and legend. (a new one, not nested) At least this is how I've interepreted and used the fieldset. An everyday example is a login form. The fieldset goes around the username and password text boxes as well as the radio button for remembering your password, with the legend on the login text. Any other fields like submitting for a lost password would be in a separate fieldset with new legend of forgotten password. -- Susan R. Grossman [EMAIL PROTECTED] ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Help with fieldset in a li
On Fri, 29 Oct 2004 10:20:54 +1000, Peter Firminger wrote: Does it make any difference? The ID ties them together anyway so I think not. As I understand it, these are the 2 alternate, valid, ways of putting a label on a field. Note that if you wrap the label around the input, you don't need the 'for', but I could be wrong as I don't do that either :) Lea -- Lea de Groot Elysian Systems - I Understand the Internet http://elysiansystems.com/ Search Engine Optimisation, Usability, Information Architecture, Web Design Brisbane, Australia ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] A little CSS question
Thanks. That's all I needed. I cleared my CSS. But my XHTML validation says something weird about the ul tags. Can you say what I need. Thanks Indranil Susan R. Grossman wrote: Is it possible to have an img tag imediately after a ul tag. No it's not valid code If not, what are the alternatives? I'm not sure why you're using an image instead of sytled text here (though it's perfectly fine to do so and looks good, if it's text though, styling it is usually the prefered method) Why are you using an unordered list without any list items? unless it's for the indent? If that's the case, I would suggest either putting the text in a division instead with appropriate padding or put into the class mentext. Is it possible to have more than on float right, float left tags, and are there any alternatives. Could you please explain this question? You can use as many floats as you wish to, though you'll probably have to use some clearing divs if you have multiple divs with floats in them. Not sure if that's what you were asking though. Is the display:block-inline supported? Yes it is. There was an interesting article on it's use to fix the sliding doors issue on IE5 Mac a couple of months ago http://emps.l-c-n.com/articles/70/stuff-and-things Can you guys comment on the design of troidus.com Nice design, looks good, doesn't validate though mostly because of the ul's without list items, but also because you have a ul inside another ul tag also. and missing alt tags in images. It's a pleasing design, though personally I think the top graphic a little too big since I often have my windows not full size, and the footer still needs a little work.
RE: [WSG] Help with fieldset in a li
If no fieldset is used for the individual questions, how does a screen reader associate the question with the radio group? The label will differentiate the options, but what about the questions? Essentially it does not as their is no explicit structural association between the radio buttons and the question. while there is an implicit association [they are within the same container element/ they are contiguous visually and or in the reading order] for the most part the screen reader only knows what you tell it through the code. If fieldsets are nested, how does a screen reader handle the legends? Are they concatenated for each form control or is only the legend from the parent fieldset used? using JAWS 4.51 the legends are not concatenated. It sounds like a long legend is a bad idea - correct? I'd agree with this. In a page where there is only one form and one semantically linked set of form controls is a fieldset necessary/desirable? I think while desirable it is not necessary, unless you have a radio button or checkbox group. But why not use the fieldset element to structure the form instead of putting in a div or some other container? remeber the legend is optional. with regards Steven Faulkner Web Accessibility Consultant National Information Library Service (NILS) 454 Glenferrie Road Kooyong Victoria 3144 Phone: (613) 9864 9281 Fax: (613) 9864 9210 Email: [EMAIL PROTECTED] National Information Library Service A subsidiary of RBS.RVIB.VAF Ltd. Damian Sweeney [EMAIL PROTECTED]To: [EMAIL PROTECTED] .edu.au cc: Sent by: Subject: RE: [WSG] Help with fieldset in a li [EMAIL PROTECTED] group.org 29/10/2004 10:29 AM Please respond to wsg Thanks to Susan, Steven and Roger for the replies so far. A couple of questions for clarification: * If no fieldset is used for the individual questions, how does a screen reader associate the question with the radio group? The label will differentiate the options, but what about the questions? * It sounds like a long legend is a bad idea - correct? * In a page where there is only one form and one semantically linked set of form controls is a fieldset necessary/desirable? * If fieldsets are nested, how does a screen reader handle the legends? Are they concatenated for each form control or is only the legend from the parent fieldset used? Cheers, Damian One benefit of using fieldset and legend for screen reader users is that nearly all readers will read the legend before every input label within a fieldset. This can be very helpful with forms that require the same information within different sections of the form. For example, if you need put in name, phone number etc for a number of different people, the form input labels for each person will be the same - the layout of the form may make the different sections of the form obvious for visual users of the site, but the difference may not be obvious if you can't see. However, when you use fieldset and legend (with say a legend of purchaser for one person) then the reader will read the labels within this fieldset as purchaser name, purchaser phone number etc. An
RE: [WSG] Help with fieldset in a li
Yes, my use of the word legend should have read label. D'oh! P However in relation to legend, a whole bunch of labels and inputs can be presented within one legend. Roger I notice that some people nest the input within the legend whereas I don't: ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Help with fieldset in a li
In a page where there is only one form and one semantically linked set of form controls is a fieldset necessary/desirable? I think while desirable it is not necessary, unless you have a radio button or checkbox group. But why not use the fieldset element to structure the form instead of putting in a div or some other container? remeber the legend is optional. The main reason for using an ol is that this is a well-established convention for questionnaires and helps to structure the feedback for responses (which is often per question for my purposes). Also, I would have thought that modern screen readers would be able to group radio and checkbox groups based on name attributes. Is this not the case? Anyway, based on the responses I'm currently thinking I'll do things this way: http://members.iinet.net.au/~damianfs/sample2.html where the fieldset only encloses the radio buttons in a group. This fixes the positioning problem for the list items in Firefox and IE and seems semantically sound to me. No legends are used. Thanks again for the excellent responses, Damian -- Damian Sweeney Instructional Designer, AIRport Project Equity, Language and Learning Programs University of Melbourne 723 Swanston St Parkville 3010 www.services.unimelb.edu.au/ellp/ ph 03 8344 9370, fax 03 9349 1039 This email and any attachments may contain personal information or information that is otherwise confidential or the subject of copyright. Any unauthorised use, disclosure or copying of any part of it is prohibited. The University does not warrant that this email or any attachments are free from viruses or defects. Please check any attachments for viruses and defects before opening them. If this email is received in error please delete it and notify us by return email or by phoning (03) 8344 9370. ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] A little CSS question
On 29 Oct 2004, at 11:03 AM, Indranil Dasgupta wrote: But my XHTML validation says something weird about the ul tags. Can you say what I need. XHTML Validation is showing 5 errors only. 3 of them can be fixed by adding 'alt' attributes to these files: img src=http://troidus.com/wp-images/who.png; / img src=http://troidus.com/wp-images/blogroll.png; / img src=http://troidus.com/wp-images/other.png; / The other two can be fixed by fixing the proper nesting of your tags. You have p ul li/li /ul /p ...which you can't do. Close the p before starting the ul: p/p ul li/li /ul ...and you should be fine. HTH - Nick ___ Omnivision. Websight. http://www.omnivision.com.au/ ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
Re: [WSG] A little CSS question
Thanks. That's all I needed. I cleared my CSS. But my XHTML validation says something weird about the ul tags. Can you say what I need. There are a couple of validation issues with your site still. You need to add alt attributes to your image tags, and if you want to put items like :text: into alt tags you should use double quotes to avoid any possible isues. The UK problem is this: img src=http://troidus.com/wp-images/blogroll.png; / p class=mentextThis is a list of blogs I frequent. Only 12 of the entire list is shown here. a href=http://troidus.com/portal/;See all raquo;/a ul You need to close the p tag before you start the ukl tag Hope this helps -- Susan R. Grossman [EMAIL PROTECTED] ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
RE: [WSG] Help with fieldset in a li
Hi Damian, I misunderstood what you meant when you wrote: In a page where there is only one form and one semantically linked set of form controls is a fieldset necessary/desirable? I didn't realize that you will still referring to your example, I thought you meant a simple form such as a text label + input + submit. I now understand and think that the use of a list in you form is appropriate. Also, I would have thought that modern screen readers would be able to group radio and checkbox groups based on name attributes. Is this not the case? from what i have read they do not group controls in this way. The info here: The HTML Forms Challenge [http://www.freedomscientific.com/HTML_challenge/files/forms_challenge.html] may be helpful for better understanding how a screen reader (JAWS) interacts with forms. with regards Steven Faulkner Web Accessibility Consultant National Information Library Service (NILS) 454 Glenferrie Road Kooyong Victoria 3144 Phone: (613) 9864 9281 Fax: (613) 9864 9210 Email: [EMAIL PROTECTED] National Information Library Service A subsidiary of RBS.RVIB.VAF Ltd. Damian Sweeney [EMAIL PROTECTED]To: [EMAIL PROTECTED] .edu.au cc: Sent by: Subject: RE: [WSG] Help with fieldset in a li [EMAIL PROTECTED] group.org 29/10/2004 12:20 PM Please respond to wsg In a page where there is only one form and one semantically linked set of form controls is a fieldset necessary/desirable? I think while desirable it is not necessary, unless you have a radio button or checkbox group. But why not use the fieldset element to structure the form instead of putting in a div or some other container? remeber the legend is optional. The main reason for using an ol is that this is a well-established convention for questionnaires and helps to structure the feedback for responses (which is often per question for my purposes). Also, I would have thought that modern screen readers would be able to group radio and checkbox groups based on name attributes. Is this not the case? Anyway, based on the responses I'm currently thinking I'll do things this way: http://members.iinet.net.au/~damianfs/sample2.html where the fieldset only encloses the radio buttons in a group. This fixes the positioning problem for the list items in Firefox and IE and seems semantically sound to me. No legends are used. Thanks again for the excellent responses, Damian -- Damian Sweeney Instructional Designer, AIRport Project Equity, Language and Learning Programs University of Melbourne 723 Swanston St Parkville 3010 www.services.unimelb.edu.au/ellp/ ph 03 8344 9370, fax 03 9349 1039 This email and any attachments may contain personal information or information that is otherwise confidential or the subject of copyright. Any unauthorised use, disclosure or copying of any part of it is prohibited. The University does not warrant that this email or any attachments are free from viruses or defects. Please check any attachments for viruses and defects before opening them. If this email is received in error please delete it and notify us by return email or by phoning (03) 8344 9370.
