RE: [WSG] Can I use a table in a form?
Using a table is not an issue, form data is tabular.
For accessibility I'd suggest using a label on each input but hide it visually
using one of the standard techniques.
table id=grouptravel summary=Group travel quote border=0
thead
tr
th class=hidden scope=colGroup/th
th scope=colAge Range/th
th scope=colNumber of travellers/th
th scope=colTrip cost per person/th
/tr
/thead
tbody
tr
th scope=rowGroup 1/th
td
label for=agerange1Age Range/label
select id=agerange1
optionblah/option
...
/select
/td
td
label for=numberoftravellers1number of travellers/label
input type=text id=numberoftravellers1 value= size=4
maxlength=4 /
/td
td
label for=costpertraveller1cost per traveller/label
input type=text id=costpertraveller1 value= size=4 maxlength=4
/
/td
/tr
... Etc
/tbody
/table
style type=text/css
#grouptravel {width:500px}
#grouptravel label {width:0; height:0; overflow:hidden}
#grouptravel .hidden {width:0; height:0; overflow:hidden}
/style
Reasoning:
Hardly anyone using a screen reader switches on table headings to be read per
table cell.
Hope it helps
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
**
Re: [WSG] Can I use a table in a form?
Mike Foskett wrote: Using a table is not an issue, form data is tabular. You say that like it's fact when it's really a matter of opinion. Personally I'd argue that a form is not a means of displaying tabular data, it's an input mechanism. It seems crazy to me that people will come up with spurious arguments simply to justify using a table. If you want to use a table, just do it. For accessibility I'd suggest using a label on each input but hide it visually using one of the standard techniques. Um, how is hiding the label going to improve accessibility? Andy Budd http://www.message.uk.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] Can I use a table in a form?
Andy Budd wrote: Personally I'd argue that a form is not a means of displaying tabular data, it's an input mechanism. Er... Agreed. I was of the opinion, perhaps incorrectly, that the form in question was intended to input tabular data hence the table. Andy Budd wrote: how is hiding the label going to improve accessibility? The use of a label on such a table would be to aide screen readers specifically. Yes they can read headers but in practice this feature is rarely switched on. So by using a hidden label the screen reader states the label text, while the display remains uncluttered. mike 2k:)2 marqueeblink e-mail: [EMAIL PROTECTED] site: http://www.webSemantics.co.uk /marquee/blink -Original Message- From: Andy Budd [mailto:[EMAIL PROTECTED] Sent: 12 January 2005 10:18 To: wsg@webstandardsgroup.org Subject: Re: [WSG] Can I use a table in a form? Mike Foskett wrote: Using a table is not an issue, form data is tabular. You say that like it's fact when it's really a matter of opinion. Personally I'd argue that a form is not a means of displaying tabular data, it's an input mechanism. It seems crazy to me that people will come up with spurious arguments simply to justify using a table. If you want to use a table, just do it. For accessibility I'd suggest using a label on each input but hide it visually using one of the standard techniques. Um, how is hiding the label going to improve accessibility? Andy Budd http://www.message.uk.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 ** ** 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] Can I use a table in a form?
On 12 Jan 2005, at 10:47, Mike Foskett wrote: Andy Budd wrote: Personally I'd argue that a form is not a means of displaying tabular data, it's an input mechanism. Er... Agreed. I was of the opinion, perhaps incorrectly, that the form in question was intended to input tabular data hence the table. I thought what I said was pretty clear so I'm a little confused how you can agree with it and then contradict it in the next sentence. What I'm saying is that tables are meant to display tabular data however a form is an input mechanism, not data itself. Thus in my opinion it would be incorrect to use a table to layout a form. The use of a label on such a table would be to aide screen readers specifically. Yes they can read headers but in practice this feature is rarely switched on. So by using a hidden label the screen reader states the label text, while the display remains uncluttered. What I'm saying is that there is no reason to hide the labels. Many screenreaders ignore hidden elements and allowing people to see what they are supposed to enter by use of a label could hardly be described as clutter. Andy Budd http://www.message.uk.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] Can I use a table in a form?
From: Andy Budd [...] What I'm saying is that tables are meant to display tabular data however a form is an input mechanism, not data itself. Thus in my opinion it would be incorrect to use a table to layout a form. Yup, that's how I've usually looked at it as well. allowing people to see what they are supposed to enter by use of a label could hardly be described as clutter. It can be visually if the table is there to let you input a few separate rows in one go (i.e. a spreadsheet-like layout, with headers at the top, and then 10-20 rows for separate entries). Maybe this (extreme?) scenario could be solved by using heavily styled fieldsets to act - visually - as rows that lay out the contained inputs horizontally...I may have to have a play around with CSS later tonight, I think. But yes, as a general principle I'd avoid this type of multi-row form anyway if at all possible. 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] London Web Standards Conference - OT?
Yes please keep the fun posts out of here. I want more on CSS rounded corners please and site checks because that is so much more on topic than a conference about Web Standards and Accessibility being discussed in the webstandardsgroup.org mail list. Ok this post is OT and slightly flame.. But meh, freezing rain and lack of caffeine are to blame. Jesse On 1/11/05 5:25 PM, Helmut Granda [EMAIL PROTECTED] wrote: Shouldn't Posting Conferences be OT as Job Opportunities? Finding out who is going or why your boss doesn't have enough cash to send you to a conference have nothing to do with standards and creates a lot more traffic than a posting about a Job that could help some one. IMHO ** 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] Can I use a table in a form?
I have tried hiding labels in the past. But I came across very inconsistent behavior. Some labels would show, some wouldn't. I was using display:none. I'm sure there was something else going on in my code, but it seemed like the inconsistency in browsers treating forms made the label hiding an iffy proposition. Has anyone else had this problem? Currently, our forms do not validate as AAA WAI because I don't have individual labels on a group of ten age inputs. I read somewhere a person suggested placing objects within the label. Could I have all of the ages on one row and wrap the td's inside the label? That doesn't sound like valid coding. Perhaps I protesteth too much. Ted -Original Message- From: Patrick Lauke [mailto:[EMAIL PROTECTED] Sent: Wednesday, January 12, 2005 5:38 AM To: wsg@webstandardsgroup.org Subject: RE: [WSG] Can I use a table in a form? From: Andy Budd [...] What I'm saying is that tables are meant to display tabular data however a form is an input mechanism, not data itself. Thus in my opinion it would be incorrect to use a table to layout a form. Yup, that's how I've usually looked at it as well. allowing people to see what they are supposed to enter by use of a label could hardly be described as clutter. It can be visually if the table is there to let you input a few separate rows in one go (i.e. a spreadsheet-like layout, with headers at the top, and then 10-20 rows for separate entries). Maybe this (extreme?) scenario could be solved by using heavily styled fieldsets to act - visually - as rows that lay out the contained inputs horizontally...I may have to have a play around with CSS later tonight, I think. But yes, as a general principle I'd avoid this type of multi-row form anyway if at all possible. 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 ** ** 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] Can I use a table in a form?
On 12 Jan 2005, at 16:42, Ted Drake wrote: I have tried hiding labels in the past. But I came across very inconsistent behavior. Some labels would show, some wouldn't. I was using display:none. I'm sure there was something else going on in my code, but it seemed like the inconsistency in browsers treating forms made the label hiding an iffy proposition. Has anyone else had this problem? Don't hide your labels. You may be able to trick bobby in giving you a AAA rating but hiding them won't help the accessibility of your site. Currently, our forms do not validate as AAA WAI because I don't have individual labels on a group of ten age inputs. I read somewhere a person suggested placing objects within the label. Could I have all of the ages on one row and wrap the td's inside the label? That doesn't sound like valid coding. How do people know what to put into these inputs? Surely each one needs a label of some kind? Andy Budd http://www.message.uk.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] Can I use a table in a form?
What you're suggesting (putting TDs in a table) sounds like using tables for
layout, which we all know we're not supposed to do... I found an article
that discusses CSS alternatives to the non-standards uses of tables for
layouts... This article from alistapart
(http://www.alistapart.com/articles/practicalcss/) discusses how one might
use Divs and Spans to lay out a form. Hopefully you can adapt it to suit
your needs... The example is in the section titled FORM(s) and Function
---Excerpt---
Another common use for table layout is lining up FORM elements with their
labels. While it could be argued that this is an appropriate use of TABLEs,
the CSS technique that I describe below will prove to be useful for other,
similar layout needs, as we will see.
A typical layout for FORMs has the labels on the left, flush right, with the
form elements on the right, flush left, with everything meeting in the
middle:
[example form is displayed here]
The form above was created without the use of TABLEs. Once again we are
using FLOAT to accomplish the positioning. The trick is to create a DIV that
works like the TABLE row that we are used to using. Then we'll create two
SPANs: one for the labels and the other for the form elements. Float the
label SPAN left and the form element SPAN right. For the label SPAN, align
the text right, and give the form element SPAN left-aligned text.
The CSS looks like this:
div.row {
clear: both;
padding-top: 10px;
}
div.row span.label {
float: left;
width: 100px;
text-align: right;
}
div.row span.formw {
float: right;
width: 335px;
text-align: left;
}
The CSS above also gives widths for the SPANs. These can be absolute values
like the example, or percentages that add up to 100% or slightly less,
depending on padding and borders (and the box model you are designing for).
In the example I have wrapped the form in another DIV to give it a border
and a background.
The example HTML looks like:
div style=width: 350px; background-color: #cc9;
border: 1px dotted #333; padding: 5px;
margin: 0px auto;
form
div class=row
span class=labelName:/spanspan
class=formwinput type=text size=25 //span
/div
div class=row
span class=labelAge:/spanspan
class=formwinput type=text size=25 //span
/div
div class=row
span class=labelShoe size:/spanspan
class=formwinput type=text size=25 //span
/div
div class=row
span class=labelComments:/spanspan
class=formw
textarea cols=25 rows=8
Go ahead - write something...
/textarea
/span
/div
div class=spacer
nbsp;
/div
/form
/div
---End of Excerpt---
Hope this helps you out a bit...
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
Behalf Of Ted Drake
Sent: Wednesday, January 12, 2005 11:43 AM
To: wsg@webstandardsgroup.org
Subject: RE: [WSG] Can I use a table in a form?
I have tried hiding labels in the past. But I came across very inconsistent
behavior. Some labels would show, some wouldn't. I was using display:none.
I'm sure there was something else going on in my code, but it seemed like
the inconsistency in browsers treating forms made the label hiding an iffy
proposition. Has anyone else had this problem?
Currently, our forms do not validate as AAA WAI because I don't have
individual labels on a group of ten age inputs. I read somewhere a person
suggested placing objects within the label. Could I have all of the ages on
one row and wrap the td's inside the label?
That doesn't sound like valid coding.
Perhaps I protesteth too much.
Ted
-Original Message-
From: Patrick Lauke [mailto:[EMAIL PROTECTED]
Sent: Wednesday, January 12, 2005 5:38 AM
To: wsg@webstandardsgroup.org
Subject: RE: [WSG] Can I use a table in a form?
From: Andy Budd
[...]
What I'm saying is that tables are meant to display tabular data
however a form is an input mechanism, not data itself. Thus in my
opinion it would be incorrect to use a table to layout a form.
Yup, that's how I've usually looked at it as well.
allowing people to see what
they are supposed to enter by use of a label could hardly be
described
as clutter.
It can be visually if the table is there to let you input a few separate
rows in one go (i.e. a spreadsheet-like layout, with headers at the top,
and then 10-20 rows for separate entries).
Maybe this (extreme?) scenario could be solved by using heavily styled
fieldsets to act - visually - as rows that lay out the contained inputs
horizontally...I may have to have a play around with CSS later tonight,
I think.
But yes, as a general principle I'd avoid this type of multi-row form
anyway if at all possible.
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
RE: [WSG] Can I use a table in a form?
Ted:
Don't hide labels with display:none. Screen readers don't see it either.
I'd suggest something more like:
.hidden {width:0; height:0; overflow:hidden; font-size:1px}
Or use a method that shifts the text off screen to the left.
Maybe consider the approach below even if it has too many repeated labels.
Personally for thirty rows of four columns I'd use a table with table headings
with hidden labels on each input.
To each their own.
Andy:
If forms were meant to be tabular they'd have fr's and fd's.
Therefore data output in tabular form is okay but data input is not.
I would have to disagree with the later statement.
Creating a method of output without an equivalent method of input seems more
than oversight.
An input is a data object.
Data objects stacked neatly by row and file are by definition tabular.
So a standards approach to tabular input?
How about this:
style type=text/css
#tabularform * {padding:0; margin:0}
#tabularform fieldset {background:#eee}
#tabularform label {margin:0 20px; white-space:nowrap}
#tabularform input.input-c1 {width:15%; padding:3px}
#tabularform input.input-c2 {padding:3px}
#tabularform input.input-c3 {width:100px; padding:3px}
#tabularform input.input-c4 {padding:3px}
/style
form id=tabularform
fieldset
h1Group 1:/h1
label for=description_r1description input class=input-c1
id=description_r1 type=text //label
label for=style_r1style
select class=input-c2 id=style_r1
optionstyle 1/option
optionstyle 2/option
optionstyle 3/option
/select
/label
label for=name_r1name input class=input-c3 id=name_r1 type=text
//label
label for=check_r1input class=input-c4 id=check_r1 type=checkbox
/ delete/label
/fieldset
fieldset
h1Group 2:/h1
label for=description_r2description input class=input-c1
id=description_r2 type=text //label
label for=style_r2style
select class=input-c2 id=style_r2
optionstyle 1/option
optionstyle 2/option
optionstyle 3/option
/select
/label
label for=name_r2name input class=input-c3 id=name_r2 type=text
//label
label for=check_r2input class=input-c4 id=check_r2 type=checkbox
/ delete/label
/fieldset
p .. repeat until funny/p
/form
Very neat, tabular and accessible.
Now the issue is how many inputs per row and will they fit on the users display.
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
**
RE: [WSG] Can I use a table in a form?
I'm not one to say screw accessibility, I need my pages to look purty, but the point of my question is: we may have 30 to 50 people registering. If I include a label for each fieldset, the page is going to be bulky and possibly less usable for those with sight. A table would make life easy, but making life easy isn't justification enough to do it wrong. I'd really like to make life easy and give some accessibility in the process. Having 50 labels that say age1, age2, age2..age50 for the 50 age inputs doesn't seem appropriate for the average user. I have little experience with screen readers. How does the column scope work? When someone tabs from cell to cell, does it repeat the column header? How does the scope connect the cells? If I put a title on the input, that says enter age of traveler and put a column header with the label Age of Traveler, will their be any feedback to the screen reader that the input is meant to handle the age of a traveler? -Original Message- From: Andy Budd [mailto:[EMAIL PROTECTED] Sent: Wednesday, January 12, 2005 10:02 AM To: wsg@webstandardsgroup.org Subject: Re: [WSG] Can I use a table in a form? On 12 Jan 2005, at 16:42, Ted Drake wrote: I have tried hiding labels in the past. But I came across very inconsistent behavior. Some labels would show, some wouldn't. I was using display:none. I'm sure there was something else going on in my code, but it seemed like the inconsistency in browsers treating forms made the label hiding an iffy proposition. Has anyone else had this problem? Don't hide your labels. You may be able to trick bobby in giving you a AAA rating but hiding them won't help the accessibility of your site. Currently, our forms do not validate as AAA WAI because I don't have individual labels on a group of ten age inputs. I read somewhere a person suggested placing objects within the label. Could I have all of the ages on one row and wrap the td's inside the label? That doesn't sound like valid coding. How do people know what to put into these inputs? Surely each one needs a label of some kind? Andy Budd http://www.message.uk.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] Can I use a table in a form?
A group of related form controls really belong together in a fieldset with a legend. Each control can then be labelled correctly. Additional 'how to use' instructions can be provided in the title attribute of each form control. Example: fieldsetlegendPlease select your age/legend label for=agegroup1 input type=radio name=age id=agegroup1 title=select this if you are aged between 18 and 24/ 18-24 /label label for=agegroup2 input type=radio name=age id=agegroup2 title=select this if you are aged between 25 and 34/ 25-34 /label fieldset @Ted ...perhaps you can make a two part form. Get the number of travellers first, and then return that number of fields to get the ages? Terrence Wood. Andy Budd wrote: On 12 Jan 2005, at 16:42, Ted Drake wrote: I have tried hiding labels in the past. Don't hide your labels. You may be able to trick bobby in giving you a AAA rating but hiding them won't help the accessibility of your site. How do people know what to put into these inputs? Surely each one needs a label of some kind? ** 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] Can I use a table in a form?
I'm not one to say screw accessibility, I need my pages to look purty, but the point of my question is: we may have 30 to 50 people registering. If I include a label for each fieldset, the page is going to be bulky and possibly less usable for those with sight. snip Having 50 labels that say age1, age2, age2..age50 for the 50 age inputs doesn't seem appropriate for the average user. Ted- I'm sorry, I'm coming onto this thread late, so I might be misinformed as to what you're trying to accomplish. So you have a form with a variable number of fields depending on how many travelers are to be insured, correct? With a maximum of 50? Frankly, there is not going to be an easy way of doing this, regardless of the accessibility issues. Thats a LOT of data to enter. I would almost think you'd want to deal with each traveler separately, one at a time, in some sort of paged form. For instance, if I fill out the initial part of the form and indicate 5 travelers to be insured, the form would be submitted, the initial form fields temporarily stored, and then the next form presented with fields for traveler 1. Once that is filled and submitted, on to traveler two. In that case, your form is broken into smaller chunks and leaving the labels on each field would be essential and not even an issue. This would seem to make it easier for both your sighted users and visually impaired users. My experience with forms has been that it is better to progressively present large forms (along with an appropriate indication of where in the process the user is). I would think that approach would increase your completion percentage as opposed to presenting a huge form with up to 50 name, age, etc. fields to be filled out at once. HTH Regards, Ron application/ms-tnef
Re: [WSG] Can I use a table in a form?
Alex Katechis wrote: [...] http://www.alistapart.com/articles/practicalcss/ [...] span class=labelName:/spanspan class=formwinput type=text size=25 //span That's just rubbish. What the heck...span class=label? This sort of thing really is just replacing one inappropriate markup (tables) for another (divs and spans with css styling) and actually *diminishing* the structure...if anything, proper label elements should be used... The author can be excused, as the article dates back to 2001, but still... -- Patrick H. Lauke _ re·dux (adj.): brought back; returned. used postpositively [latin : re-, re- + dux, leader; see duke.] www.splintered.co.uk | www.photographia.co.uk http://redux.deviantart.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 **
Are forms tabular data? (was Re: [WSG] Can I use a table in a form?)
Andy: If forms were meant to be tabular they'd have fr's and fd's. Therefore data output in tabular form is okay but data input is not. Hi, Sorry if I quoted you out of context Andy (I don't have the original message), but I have a question regarding why forms should or should not be considered tabular data. Suppose we are presenting the user with a form where the inputs are pre populated with data; for example a form used to edit an entry in a database. In your opinion (or anyone else's), should this impact whether the form should be considered tabular or not? First Name [Michael] Last Name [Wilson] Age [Old] Although the data is contained within form elements, technically this is data output. I haven't formed an opinion on the subject, so please don't take my comment as some kind of troll. I've avoided the use of tables for forms for some time now--some times it works out, sometimes it does not. It just occurred to me as I was reading the responses here that, within the argument, the question of data input versus data output seemed to be the (or part of the) crux. Is this the case or does the argument hinge on the fact that the input element itself is not data; therefore, not tabular. If this is the premise, then couldn't one argue that the p element is not data; therefore, not tabular? -- Best regards, Michael Wilson ** 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: Are forms tabular data? (was Re: [WSG] Can I use a table in a form?)
To me tabular means...tabular. Take a look at most real-world forms. DMV, tax forms, you name it. Mostly all tabular. The form is broken up into logical groups / cells indicating a relationship of relationship through the structure. Yes I know fieldsets also create a group/relationship of form fields, but point being the motif of forms in a tabular format has been around and used for a long time. Ryan Nichols Graphic Design / Web Development Matrixwebs.com 1.800.711.2829 18330 Sutter Blvd. Morgan Hill, CA 95037 -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Michael Wilson Sent: Wednesday, January 12, 2005 12:13 PM To: wsg@webstandardsgroup.org Subject: Are forms tabular data? (was Re: [WSG] Can I use a table in a form?) Andy: If forms were meant to be tabular they'd have fr's and fd's. Therefore data output in tabular form is okay but data input is not. Hi, Sorry if I quoted you out of context Andy (I don't have the original message), but I have a question regarding why forms should or should not be considered tabular data. Suppose we are presenting the user with a form where the inputs are pre populated with data; for example a form used to edit an entry in a database. In your opinion (or anyone else's), should this impact whether the form should be considered tabular or not? First Name [Michael] Last Name [Wilson] Age [Old] Although the data is contained within form elements, technically this is data output. I haven't formed an opinion on the subject, so please don't take my comment as some kind of troll. I've avoided the use of tables for forms for some time now--some times it works out, sometimes it does not. It just occurred to me as I was reading the responses here that, within the argument, the question of data input versus data output seemed to be the (or part of the) crux. Is this the case or does the argument hinge on the fact that the input element itself is not data; therefore, not tabular. If this is the premise, then couldn't one argue that the p element is not data; therefore, not tabular? -- Best regards, Michael Wilson ** 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] Can I use a table in a form?
I tried the approach below. Only works if there's only one input tag on the right column. If there're more input fields in a row (even if it's just 2 input type=radio, the following row just keeps on indenting itself to the right. For me, I settled the matter by using definition lists. Sponged the method off Simplebits.com. Labels in dt, inputs in dd. Not sure how it works out semantically though. -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Alex Katechis Sent: Thursday, January 13, 2005 2:24 AM To: wsg@webstandardsgroup.org Subject: RE: [WSG] Can I use a table in a form? What you're suggesting (putting TDs in a table) sounds like using tables for layout, which we all know we're not supposed to do... I found an article that discusses CSS alternatives to the non-standards uses of tables for layouts... This article from alistapart (http://www.alistapart.com/articles/practicalcss/) discusses how one might use Divs and Spans to lay out a form. Hopefully you can adapt it to suit your needs... The example is in the section titled FORM(s) and Function ** 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: Are forms tabular data? (was Re: [WSG] Can I use a table in a form?)
Ryan Nichols wrote: To me tabular means...tabular. Take a look at most real-world forms. DMV, tax forms, you name it. Mostly all tabular. The form is broken up into logical groups / cells indicating a relationship of relationship through the structure. Yes I know fieldsets also create a group/relationship of form fields, but point being the motif of forms in a tabular format has been around and used for a long time. Here's a better thought: Does it matter? Fieldsets, DefLists, and Tables are ALL semantically correct, and they don't make a difference to way both graphical and accessible agents render the content. Can we call this resolved now? -- -David R ** 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] Positioning in IE/Win -- Dependent on Doctype Switching?
Hey gang, here's a question for you. I'm working on converting a page location picker for our CMS from tables to something more standards-compliant. I found something interesting I wanted more information about: http://www.angelfire.com/blog/wrongheaded/webhelp/locations_test/standards.html http://www.angelfire.com/blog/wrongheaded/webhelp/locations_test/quirks.html Why does IE/Win mess up the layout for that second page? Also, are there any Mac browsers that screw up the layout for either page? And does anyone think it was a mistake to use nested fieldset elements like that? Charlie ** 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: Are forms tabular data? (was Re: [WSG] Can I use a table in a form?)
They are only semantically correct when used within specific contexts. Too many people confuse semantics (the implicit meaning of markup) with valid html (correct code). They are two completely different sides of the same coin. If it doesn't matter to you, then you're a member of the wrong list. -- Iain Gardiner http://www.firelightning.com -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of David R Sent: 12 January 2005 21:28 To: wsg@webstandardsgroup.org Subject: Re: Are forms tabular data? (was Re: [WSG] Can I use a table in a form?) Ryan Nichols wrote: To me tabular means...tabular. Take a look at most real-world forms. DMV, tax forms, you name it. Mostly all tabular. The form is broken up into logical groups / cells indicating a relationship of relationship through the structure. Yes I know fieldsets also create a group/relationship of form fields, but point being the motif of forms in a tabular format has been around and used for a long time. Here's a better thought: Does it matter? Fieldsets, DefLists, and Tables are ALL semantically correct, and they don't make a difference to way both graphical and accessible agents render the content. Can we call this resolved now? -- -David R ** 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] Possible Min-height issue
As usual with me, I figure something out _right_ after I post. The page is working in Safari, FF Mac, Win IE6/5.5. If you find a mess when you look at it, let me know! Tom Livingston Senior Multimedia Artist Media Logic mlinc.com On Jan 12, 2005, at 4:49 PM, Tom Livingston wrote: stay flush with the bottom ** 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] Positioning in IE/Win -- Dependent on Doctype Switching?
On 13 Jan 2005, at 8:35 AM, Charlie Barr wrote: Hey gang, here's a question for you. I'm working on converting a page location picker for our CMS from tables to something more standards-compliant. I found something interesting I wanted more information about: http://www.angelfire.com/blog/wrongheaded/webhelp/locations_test/ standards.html http://www.angelfire.com/blog/wrongheaded/webhelp/locations_test/ quirks.html Why does IE/Win mess up the layout for that second page? Also, are there any Mac browsers that screw up the layout for either page? And does anyone think it was a mistake to use nested fieldset elements like that? Charlie Mmm... popup ads on a test page! Most attractive - not. Standards/quirks modes pairs render as follows on OSX 10.3.7: Safari 1.2.4 - identical, except for additional space above first h1 in standards.html IE5.2.3 - both break, with what looks like additional padding on the fieldsets. Try browsercan to see exactly how. N ___ 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: Are forms tabular data? (was Re: [WSG] Can I use a table in a form?)
Iain Gardiner wrote: They are only semantically correct when used within specific contexts. Too many people confuse semantics (the implicit meaning of markup) with valid html (correct code). They are two completely different sides of the same coin. If it doesn't matter to you, then you're a member of the wrong list. Lets not start a flame war ;) Tables are used to define data, data sets, results, and columnar information. DefLists (dldtdd) are strictly for the listing of defintions, its generally accepted practice to use this element for information displayed in title/content pairs. And fieldsets are used to group related input fields. Consider that Tables are equally qualified to display information in title/content format, this is how databases store information, and from a glance, an Excel spreadsheet is no different from a database's dataview, or a table containing the same data. Real-world(tm) forms, such as Tax Returns, are often layouted in a tabular manner... see for yourself, its tax-season in the states right now (AFAIK). But at the same time, a dl could be used, as virtually all the questions on a tax return are in the Question: Write/Choose your answer format. Don't accuse me of confusing semantics with valid code, I think I know the difference. It seems you're the one confusing me with a beginner in the field. I'm not an idealist, I'm a realist, and in the real world, it doesn't make a difference regarding semantics, accessibility, rendering/apperance or usability in general. All are equally valid! -- -David R ** 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] Possible Min-height issue
Hmmm, I think that you could adapt a javascript/css fix that I found on an ALA article (http://www.alistapart.com/articles/footer) you might need to factor in padding, margins, borders, and heights of the different elements in your page. -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Behalf Of Tom Livingston Sent: Wednesday, January 12, 2005 4:49 PM To: wsg@webstandardsgroup.org Subject: [WSG] Possible Min-height issue Hello all, Here's my page: http://66.155.251.20/picotte.com/about/index.cfm All is well except... What I need is for the bottom of the 'grey bar with little squares' image below the copy to stay flush with the bottom of the blue on the right (below Brokers Only) **when the content/copy is _not_ longer than the right, blue side of the page**. When it is, it should push down the page along with the footer, staying in place below the copy/content. Seems like a min-height thing, but can I actually do that to the #content div in my current situation? I was attempting to implement the min-height fix from mezzoblue, but it seemed to have no effect (at least not the effect I was looking for ;-) ). Any help would be greatly, and publicly, appreciated as well as incite a lengthy happy-dance here in my office. Sorry, no video feed... Tom Livingston Senior Multimedia Artist Media Logic mlinc.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 ** --- Incoming mail is certified Virus Free. Checked by AVG anti-virus system (http://www.grisoft.com). Version: 6.0.804 / Virus Database: 546 - Release Date: 11/30/2004 --- Outgoing mail is certified Virus Free. Checked by AVG anti-virus system (http://www.grisoft.com). Version: 6.0.804 / Virus Database: 546 - Release Date: 11/30/2004 ** 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] Positioning in IE/Win -- Dependent on Doctype Switching?
I had no idea the page had popups. I use browsers that actually block all my popups for me, so I don't fret over them anymore. Guess it's time to find another free hosting service. Charlie Nick Gleitzman has created a disturbance in the Force. I felt its presence on 1/12/2005 5:19 PM. Its substance was as follows: On 13 Jan 2005, at 8:35 AM, Charlie Barr wrote: Hey gang, here's a question for you. I'm working on converting a page location picker for our CMS from tables to something more standards-compliant. I found something interesting I wanted more information about: http://www.angelfire.com/blog/wrongheaded/webhelp/locations_test/ standards.html http://www.angelfire.com/blog/wrongheaded/webhelp/locations_test/ quirks.html Why does IE/Win mess up the layout for that second page? Also, are there any Mac browsers that screw up the layout for either page? And does anyone think it was a mistake to use nested fieldset elements like that? Charlie Mmm... popup ads on a test page! Most attractive - not. Standards/quirks modes pairs render as follows on OSX 10.3.7: Safari 1.2.4 - identical, except for additional space above first h1 in standards.html IE5.2.3 - both break, with what looks like additional padding on the fieldsets. Try browsercan to see exactly how. N ** 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: Are forms tabular data? (was Re: [WSG] Can I use a table in a form?)
I agree. I quite sweating these a while ago, because it's all up to some measure of interpretation. (Raises mug) Ryan Nichols Graphic Design / Web Development Matrixwebs.com 1.800.711.2829 18330 Sutter Blvd. Morgan Hill, CA 95037 -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of David R Sent: Wednesday, January 12, 2005 2:39 PM To: wsg@webstandardsgroup.org Subject: Re: Are forms tabular data? (was Re: [WSG] Can I use a table in a form?) Iain Gardiner wrote: They are only semantically correct when used within specific contexts. Too many people confuse semantics (the implicit meaning of markup) with valid html (correct code). They are two completely different sides of the same coin. If it doesn't matter to you, then you're a member of the wrong list. Lets not start a flame war ;) Tables are used to define data, data sets, results, and columnar information. DefLists (dldtdd) are strictly for the listing of defintions, its generally accepted practice to use this element for information displayed in title/content pairs. And fieldsets are used to group related input fields. Consider that Tables are equally qualified to display information in title/content format, this is how databases store information, and from a glance, an Excel spreadsheet is no different from a database's dataview, or a table containing the same data. Real-world(tm) forms, such as Tax Returns, are often layouted in a tabular manner... see for yourself, its tax-season in the states right now (AFAIK). But at the same time, a dl could be used, as virtually all the questions on a tax return are in the Question: Write/Choose your answer format. Don't accuse me of confusing semantics with valid code, I think I know the difference. It seems you're the one confusing me with a beginner in the field. I'm not an idealist, I'm a realist, and in the real world, it doesn't make a difference regarding semantics, accessibility, rendering/apperance or usability in general. All are equally valid! -- -David R ** 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] Possible Min-height issue
You could use this little bit of code to find the position of one
element then do the work to place the other element using the new found
co-ords
function GetElementPostion(xElement){
var selectedPosX = 0;
var selectedPosY = 0;
var theElement = document.getElementById(xElement);
while(theElement != null){
selectedPosX += theElement.offsetLeft;
selectedPosY += theElement.offsetTop;
theElement = theElement.offsetParent;
}
return selectedPosX+px + , + selectedPosY + px;
}
Cheers,
Mark
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On
Behalf Of Alex Katechis
Sent: Thursday, 13 January 2005 9:41 AM
To: wsg@webstandardsgroup.org
Subject: RE: [WSG] Possible Min-height issue
Hmmm, I think that you could adapt a javascript/css fix that I found on
an
ALA article (http://www.alistapart.com/articles/footer) you might need
to
factor in padding, margins, borders, and heights of the different
elements
in your page.
-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
Behalf Of Tom Livingston
Sent: Wednesday, January 12, 2005 4:49 PM
To: wsg@webstandardsgroup.org
Subject: [WSG] Possible Min-height issue
Hello all,
Here's my page:
http://66.155.251.20/picotte.com/about/index.cfm
All is well except...
What I need is for the bottom of the 'grey bar with little squares'
image below the copy to stay flush with the bottom of the blue on the
right (below Brokers Only) **when the content/copy is _not_ longer
than the right, blue side of the page**. When it is, it should push
down the page along with the footer, staying in place below the
copy/content.
Seems like a min-height thing, but can I actually do that to the
#content div in my current situation? I was attempting to implement the
min-height fix from mezzoblue, but it seemed to have no effect (at
least not the effect I was looking for ;-) ).
Any help would be greatly, and publicly, appreciated as well as incite
a lengthy happy-dance here in my office. Sorry, no video feed...
Tom Livingston
Senior Multimedia Artist
Media Logic
mlinc.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
**
---
Incoming mail is certified Virus Free.
Checked by AVG anti-virus system (http://www.grisoft.com).
Version: 6.0.804 / Virus Database: 546 - Release Date: 11/30/2004
---
Outgoing mail is certified Virus Free.
Checked by AVG anti-virus system (http://www.grisoft.com).
Version: 6.0.804 / Virus Database: 546 - Release Date: 11/30/2004
**
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. Please
note that any views or opinions presented in this email are solely those of the
author and do not necessarily represent those of the company. The recipient
should check this email and any attachments for the presence of viruses. The
company accepts no liability for any damage caused by any virus transmitted by
this email.
**
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] Can I use a table in a form?
G'day
span class=labelName:/spanspan
class=formwinput type=text size=25 //span
That's just rubbish. What the heck...span class=label?
This sort of thing really is just replacing one inappropriate markup
(tables) for another (divs and spans with css styling) and actually
*diminishing* the structure...if anything, proper label elements
should be used...
I'd have to side with Patrick on this one - using lots of spans
with classes to mimic a table layout is (IMHO) even worse than
using a table to lay out the form (and more spaghetti code)
div class=rowor tr ?
span class=label or td ?
span class=formw or td ?
But why not style the label to float left?
Quick HTML snippet (incomplete):
fieldset
legendContact Details/legend
p
label for=NameName:/label
input id=Name name=Name /
/p
!-- more fields here --
/fieldset
CSS snippet:
label {
clear: left;
float: left;
width: 14em;
/* Add whatever formatting you want */
}
I use something like this on the forms on my own site (which
probably aren't perfect either, but I try).
Regards
--
Bert Doorn, Better Web Design
http://www.betterwebdesign.com.au/
Fast-loading, user-friendly websites
**
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] the propsed table/form - - was: Can I use a table in a form?
Thank you everyone for your comments. Sometimes a question generates more questions than answers, but that is what we are here for. Each person's suggestions was interesting. I've taken the advice to heart and I understand the importance of semantic and valid coding. I put together a sample table form for the page. I still think that for our purpose, the table is the best solution. I'm stressing our situation. We will have someone with a list of information and they just want to type it in. This is not the best situation for someone using a screen reader or pocket pc, but I just don't see that happening for this page. I think the extra noise involved in the extraneous labels or separating the field into multiple forms is more work for the end user. Here's the sample table fieldset table cellspacing=0 class=zebraTable caption Group Roster /caption thead tr th scope=colTraveler #/th th scope=collabel for=firstname* First Name/label/th th scope=collabel for=lastname* Last Name/label/th th scope=collabel for=age* Age:/label/th /tr /thead tbody tr td1/td tdinput type=text name=firstname1 maxlength=30 size=25 value= id=firstname title=Enter the first name //td tdinput type=text name=lastname1 maxlength=30 size=25 value= id=lastname title=Enter the last name //td tdinput type=text name=age1 maxlength=3 size=5 value= id=age //td /tr tr td2/td tdinput type=text name=firstname2 maxlength=30 size=25 value= id=firstname2 title=Enter the first name //td tdinput type=text name=lastname2 maxlength=30 size=25 value= id=lastname2 title=Enter the last name //td tdinput type=text name=age2 maxlength=3 size=5 value= id=age2 //td /tr /tbody /table /fieldset From an accessibility standpoint, do the title attributes do anything? Would alt attributes do anything? Do the label tags do anything beyond the first set of inputs? Whether it is semantic is debatable. It looks like valid xhtml to me. I'd love to find a solution that is completely accessible and just as simple. Ted ** 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] Problem UL with Firefox
Can anyone assist
with a hack that is forFirefox only. I have found that bot IE6 and Opera
7.54 place the list-image outside the border area of the ul. Firefox however
places the image inside the ul border. The hacks I have used all affect
both Firefox and Opera. Any suggestions please.
Thanks
Graham Cook
Code: (ul and li
borders for demonstration only)
style.cssRightModule{right:0px;padding:0px;margin:0px;width:240px;font-size
: 80%;font-family:
Verdana,Arial,sans-serif;color:#003366;}
.cssRightModuleTop,
.cssRightModuleContent,
.cssRightModuleBottom{padding-left:15px;}
.cssRightModuleTop{margin:0px;background:
#d9ecff url(/global/res/themes/corporate/images/bckgrnd_panel_curve_top.gif)
no-repeat top right;padding-bottom : 3px;top :
-3px;
border-bottom:
1px solid #fff;}
.cssRightModuleTop
h2{font-size : 110%;padding:0px;margin-top :
0px;
}
.cssRightModuleContent{border-top: 1px solid
#FF;padding:5px 0px 0px 10px ;margin:
0;background:#d9ecff;border-bottom:1px solid
#d9ecff;}
.cssRightModuleBottom{background:
#d9ecff
url(/global/res/themes/corporate/images/bckgrnd_panel_curve_bottom.gif)
no-repeat bottom left ;height:10px;margin-bottom :
10px;}
.cssRightModuleContent ul{margin-top:.25em;border :
thin solid blue;margin-left:10px;}
/*Regognised by Firefox and Operahtmlbody
.cssRightModuleContent ul {margin-left: -10px;} */
/*Regognised by Firefox and
Operahead:first-child+body .cssRightModuleContent ul {margin-left: -10px;}
*/
/*Regognised by Firefox and
Operahtmlbody .cssRightModuleContent ul {ma\rgin-left:
-10px; } */
/*Regognised by Internet Explorer* html
.cssRightModuleContent ul {margin-left: -10px;} */
.cssRightModuleContent
li{list-style-image :
url(/global/res/images/orange_bullet.gif);border : thin solid
red;margin-left: 6px; padding-left:
1px;list-style-position :
outside;}/style
div class=cssRightModulediv
class=cssRightModuleToph2Internet
Explorer/h2/divdiv
class=cssRightModuleContentullia
href=""Newsletter Ed 17/a
(23/11/04)/liliConfidential standards are
now hosted on our a href="">Intranet'
href=''>http://www.in.telstra.com.au/ism/onlinestandards/"Intranet site/a
(26/06/03)/li/ul/divdiv
class="cssRightModuleBottom"/div/div
Outlook.jpgOutlook.jpgOutlook.jpg
Re: [WSG] Problem UL with Firefox
Cook, Graham R wrote:
Can anyone assist with a hack that is for Firefox only. I have found
that bot IE6 and Opera 7.54 place the list-image outside the border area
of the ul. Firefox however places the image inside the ul border. The
hacks I have used all affect both Firefox and Opera. Any suggestions
please.
Sheesh, a wealth of hacks already there, which are useless. You've
started running around in circles, compensating for differences on a per
browser basis, when all you needed to do was to define all the defaults
properly:
remove the hacks
/*Regognised by Firefox and Opera
htmlbody .cssRightModuleContent ul {margin-left: -10px;} */
/*Regognised by Firefox and Opera
head:first-child+body .cssRightModuleContent ul {margin-left: -10px;} */
/*Regognised by Firefox and Opera
htmlbody .cssRightModuleContent ul {ma\rgin-left: -10px; } */
/*Regognised by Internet Explorer
* html .cssRightModuleContent ul {margin-left: -10px;} */
and simply add
padding:0;
to your .cssRightModuleContent ul definition
There are a lot more tweaks and fixes that should be done to the styles,
but the main point to take away from this: each browser has slightly
different defaults for margin and padding of different elements (in this
case, lists); to achieve consistent results, define them both. Don't
just assume that padding will be zero, define it explicitly.
On a related topic:
http://www.meyerweb.com/eric/thoughts/2004/09/15/emreallyem-undoing-htmlcss/
--
Patrick H. Lauke
_
re·dux (adj.): brought back; returned. used postpositively
[latin : re-, re- + dux, leader; see duke.]
www.splintered.co.uk | www.photographia.co.uk
http://redux.deviantart.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] Problem UL with Firefox
Found my
problem;
Here's the trick
(after reading MaxDesign 'Taming Lists')
1.Mark margin-left
and padding-left of both ul and li to 0px
2.Use the ul
margin-left to set image position in em
3. Use the li
padding-left in em to set the distance between the image and the
text
.cssRightModuleContent
ul{margin-top:.25em;margin-left:1em;padding-left:0px;}.cssRightModuleContent
li{list-style-image :
url(/global/res/images/orange_bullet.gif);margin-left: 0px;
padding-left:10em;list-style-position :
outside;}
Cheers
Graham
Cook
Re: [WSG] Problem UL with Firefox
Hi Graham
That looks like a very complex setup to display what is really a
simple list of two items, with an image for a bullet. Perhaps the
complexity is causing your problem (or the extra markup to
highlight the problem is confusing me)?
How about this approach:
ul {
list-style: none;
margin:0;
padding:0;
}
li {
background: transparent url(whatever) no-repeat;
padding-left: 30px;
}
Seems to work fine in Opera, MSIE and Firefox (on a quick test I
ran) But maybe I'm missing something.
Regards
--
Bert Doorn, Better Web Design
http://www.betterwebdesign.com.au/
Fast-loading, user-friendly websites
**
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] Problem UL with Firefox
Bert, I cut down the html to minimum possible, actual lists include many items, plus several lists in each panel. Panel is also part of containing div which contains several of these panels. Thanks anyway Graham ** 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] Class -vs- ID
Just wondering. I was asked for the first time yesterday, what the big difference and advantage to using an ID over a CLASS was... I know why classes are good! What is the advantage of an ID over simply giving something an ID?? I know these facts, Only 1 usage per ID per page... Classes are unlimited, and you can assing Multiple classes to each entity too... So... Why? -- Chris Stratford [EMAIL PROTECTED] http://www.neester.com -- No virus found in this outgoing message. Checked by AVG Anti-Virus. Version: 7.0.300 / Virus Database: 265.6.11 - Release Date: 12/01/2005 ** 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] Problem UL with Firefox
On Thu, 13 Jan 2005 12:20:55 +1100, Cook, Graham R
[EMAIL PROTECTED] wrote:
Can anyone assist with a hack that is for Firefox only. I have found that
bot IE6 and Opera 7.54 place the list-image outside the border area of the
ul. Firefox however places the image inside the ul border. The hacks I have
used all affect both Firefox and Opera. Any suggestions please.
Thanks
Graham Cook
Well, I've made the things a little different. Look here:
http://www.dotplusweb.com/ul_test.html
It's similar to what you where trying to achieve and has the same
results in firefox 1.0, IE6/Win and Oper 7/Win.
The code is different and very smaller and semantic.
This is the code (you'd better look it at the url above):
style type=text/css
!--
*{
margin:0;
padding:0;
}
body{
margin:10px;
font:80% verdana, arial, sans-serif;
}
#container{
width:240px;
background:#d9ecff url(/i/round_bottom.gif) no-repeat bottom
left;
padding-bottom:20px;
}
h2{
margin-bottom:2px;
padding:0 0 15px 10px;
background:#d9ecff url(/i/round_top.gif) no-repeat top right;
font-size:110%;
border-bottom:2px solid white;
}
ul{
margin:5px 0 20px 10px;
border : thin solid blue;
}
li{
list-style:outside url(/i/tick.gif) none;
border : thin solid red;
margin-left:20px;
}
--
/style
body
div id=container
h2Internet Explorer/h2
ul
lia
href=/standards/services/newsletter/current.cfmNewsletter
Ed 17/a (23/11/04)/li
liConfidential standards are now hosted on our a
href=http://www.in.telstra.com.au/ism/onlinestandards/;Intranet
site/a (26/06/03)/li
/ul
/div
/body
--
Bruno Cunha Torres
www.brunotorres.net
**
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] Class -vs- ID
IDs have higher specificity is another. You can link/anchor to them that way. Cheers Jeff On 13/1/05 1:23 PM, Chris Stratford [EMAIL PROTECTED] wrote: Just wondering. I was asked for the first time yesterday, what the big difference and advantage to using an ID over a CLASS was... I know why classes are good! What is the advantage of an ID over simply giving something an ID?? I know these facts, Only 1 usage per ID per page... Classes are unlimited, and you can assing Multiple classes to each entity too... So... Why? ** 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] Class -vs- ID
BTW I know IDs are needed for LABELS and other FORM elements. :) Cheers Chris Stratford wrote: Just wondering. I was asked for the first time yesterday, what the big difference and advantage to using an ID over a CLASS was... I know why classes are good! What is the advantage of an ID over simply giving something an ID?? I know these facts, Only 1 usage per ID per page... Classes are unlimited, and you can assing Multiple classes to each entity too... So... Why? -- Chris Stratford [EMAIL PROTECTED] http://www.neester.com -- No virus found in this outgoing message. Checked by AVG Anti-Virus. Version: 7.0.300 / Virus Database: 265.6.11 - Release Date: 12/01/2005 ** 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] Class -vs- ID
another difference between classes and ids are that IDs have a higher specificity than classes. If a class's properties conflicted with an ID's properties, the ID would take precedence over the class. -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] Behalf Of Chris Stratford Sent: Wednesday, January 12, 2005 9:23 PM To: WSG Subject: [WSG] Class -vs- ID Just wondering. I was asked for the first time yesterday, what the big difference and advantage to using an ID over a CLASS was... I know why classes are good! What is the advantage of an ID over simply giving something an ID?? I know these facts, Only 1 usage per ID per page... Classes are unlimited, and you can assing Multiple classes to each entity too... So... Why? -- Chris Stratford [EMAIL PROTECTED] http://www.neester.com -- No virus found in this outgoing message. Checked by AVG Anti-Virus. Version: 7.0.300 / Virus Database: 265.6.11 - Release Date: 12/01/2005 ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help ** --- Incoming mail is certified Virus Free. Checked by AVG anti-virus system (http://www.grisoft.com). Version: 6.0.804 / Virus Database: 546 - Release Date: 11/30/2004 --- Outgoing mail is certified Virus Free. Checked by AVG anti-virus system (http://www.grisoft.com). Version: 6.0.804 / Virus Database: 546 - Release Date: 11/30/2004 ** 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] Class -vs- ID
Chris Stratford wrote:
What is the advantage of an ID over simply giving something an ID??
No measurable advantage, but it's a question of principle and
appropriateness: if something is unique (e.g. your page will only ever
have one header, footer, main navigation bar, content area, etc), then
ID is the most suitable attribute to use.
Sure, you could just use classes, or - at the other extreme - define
lots of unique IDs like #item1, #item2, #item3 and then define something
like #item1,#item2,#item3 { /* some CSS */ } and of course it would
work...but it's really not following the idea behind ID and class.
--
Patrick H. Lauke
_
re·dux (adj.): brought back; returned. used postpositively
[latin : re-, re- + dux, leader; see duke.]
www.splintered.co.uk | www.photographia.co.uk
http://redux.deviantart.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] Class -vs- ID
Chris Stratford wrote: What is the advantage of an ID over simply giving something an ID?? Besides the benefits of greater CSS selector specificity than classes and its use as a target for URLs, ids also convey a semantic value which is different than a class and can be referred to via scripting (getElementById). ** 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] Class -vs- ID
What is the advantage of an ID over simply giving something an ID?? My explanation for the existance of IDs in CSS is simply that if IDs are there to be used in HTML, then they need to be there in CSS too. In other words, if you're sitting there with your own HTML document and you're wondering what's the difference between using an ID and a class to style one particular H1 element, there really isn't one. But if you're in control only of the CSS document, trying to style a page created by someone else, or otherwise beyond your control, and they've used IDs for whatever reason, the CSS syntax allows you to do that too. Have You Validated Your Code? John Horner(+612 / 02) 9333 3488 Senior Developer, ABC Online http://www.abc.net.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] Semantically creating 'pipes' for footer links
Ah yes - now I remember :o)
Richard
- Original Message -
From: Neerav [EMAIL PROTECTED]
To: wsg@webstandardsgroup.org
Sent: Tuesday, October 05, 2004 2:36 PM
Subject: Re: [WSG] Semantically creating 'pipes' for footer links
Richard
See how I display the pipes on the horizontal menu at www.bhatt.id.au
using css borders.
the list itself has a border-left, and all list items have a border-right
Neerav Bhatt
http://www.bhatt.id.au
Web Development IT consultancy
Mobile: +61 (0)403 8000 27
http://www.bhatt.id.au/blog/ - Ramblings Thoughts
http://www.bookcrossing.com/mybookshelf/neerav
Richard Czeiger wrote:
Sure but this only works on, like, two browsers!
Is there a funckier CSS hack kind of way?
:o)
Richard
- Original Message -
*From:* Kevin Futter mailto:[EMAIL PROTECTED]
*To:* wsg@webstandardsgroup.org mailto:wsg@webstandardsgroup.org
*Sent:* Tuesday, October 05, 2004 12:02 PM
*Subject:* Re: [WSG] Semantically creating 'pipes' for footer links
For the line wrapping issue, you could try:
whitespace: nowrap;
On whatever element is giving you trouble.
Cheers,
Kevin Futter
On 5/10/04 11:28 AM, Richard Czeiger [EMAIL PROTECTED]
mailto:[EMAIL PROTECTED] wrote:
Hi guys,
I'm putting together a semantically correct UL of links for my
footer.
I'd like to have them separated by 'pipes' as this is a common
and easily recognised technique.
But the pipes themselves are irrelevant (semantically). So
here's what I've come up with...
ALSO! My one thing is that if the text inside the links is made
up of two or more words, then they get pushed to separate lines.
Is there a way to avoid this without specifying a width or
without putting a 'no broken spaces' between the words?
Can you suggest anything better?
style type=text/css
#footer {
text-align: center;
}
#footer ul li {
display: inline; width: 1px;
margin: auto 5px; padding-left: 10px; border-left: 1px solid
#00;
line-height: 120%;
}
#footer ul li:first-child { border-left: none; }
/* Not rendered by a few agents, so we'll use the
'footerBorderKill' javascript function switches off the first
child's left border */
/style
div id=footer
ul id =contentLinks
lia href=link1.html title=Link 1
accesskey=1link/a/li
lia href=link2.html title=Link 2 accesskey=2link
with multiple words/a/li
lia href=link3.html title=Link 3
accesskey=3link/a/li
lia href=link4.html title=Link 4
accesskey=4linknbsp;withnbsp;NoBrokenSpaces/a/li
lia href=link5.html title=Link 5
accesskey=5link/a/li
/ul
ul id=validationLinks
lia href=http://validator.w3.org/check/referer;
rel=external title=Check XHTMLxhtml/a/li
lia
href=http://jigsaw.w3.org/css-validator/check/referer;
rel=external title=Check CSScss/a/li
lia
href=http://creativecommons.org/licenses/by-nc-sa/2.0/;
rel=external title=View licensecc/a/li
/ul
/div
script type=text/javascript//![CDATA[
// Kills the Left Border on the Footer Navigation
function footerBorderKill() {
myBody=document.getElementById('footer');
myBodyElements=myBody.getElementsByTagName(ul); // Gets all
the UL elements that are children of 'footer'
for( var i = 0; i myBodyElements.length; i++ ) {
myList=myBodyElements.item(i); // Loops through all the ULs in
the footer
myListElements=myList.getElementsByTagName(li); // Gets all
the LI elements that are children of the ULs
myLI=myListElements.item(0); // Gets the first item of the
list of LI elements
myLI.style.borderLeft = 'none'; // And sets its border to
nothing
}
}
window.onload = footerBorderKill;
file://]]/script
**
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] Class -vs- ID
At 06:23 PM 1/12/05, Chris Stratford wrote: I was asked for the first time yesterday, what the big difference and advantage to using an ID over a CLASS was... Chris, With regard to our intentions as scripters, what you and everyone else has said applies: ids are unique, classes are generic, and we should apply one or the other according to our understanding of the uniqueness of the object in the page structure. At the same time, if I'm in an ambiguous situation in which I'm not sure whether to use id or class -- say because I've only got one instance of the object and I'm not sure whether there will ever be siblings -- I might choose id simply for reasons of speculative browser efficiency: From a software mechanic's point of view, using id might be much faster than using class even if only one object is involved. [This difference in speed might or might not be too slim to be humanly perceptible.] I can easily imagine a browser resolving an id more quickly than a class. Within its memory structure there's likely just one position reserved for a given id, so that, when an id is referred to and the browser searches its internal index for a match, it will stop at the first match. In contrast, depending on how efficiently or inefficiently the browser has indexed objects by class, it may have to search the entire document object tree each time a classname is referenced to ensure that it catches all instances. Even if it's created a length-tagged array of objects with a given class, it's probably going to require a bit more processing to walk an array of even one member than it will have done to match a single unique id. But pay no mind: this kind of thinking is very Old School. Why, way back in dem olden times, we had to pay attention to machine cycles because it really affected response time on a human scale. Nowadays everything runs so fast we can just focus on how to do things right and not worry about how long it takes the computer to do it. Mmm, hmm! Paul ** 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] iframe and HTML 401 strict.
Hi, How come the validator said that iframe is not a valid tag or can not be used with HTML 4.01 strict? I remember that I used in the past iframe without problem. div id=block iframe src=vide.htm id=mframe name=mframe width=690 height=320 scrolling=auto style=margin-top:20px; border:0px/iframe /div Thanks in advance for the information Berry ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
