Re: [WSG] is there a way to force legend text shows in TWO lines?

[Kate Busch Petersen]

From: tee <[EMAIL PROTECTED]>
Date: Wed, 26 Nov 2008 18:04:09 -0800
Subject: is there a way to force legend text shows in TWO lines?

1) Can anyone absolutely positively confirm that without legend a site
will cause suffering to screen reader's user or cause a traumatic
effect to accessibility?



I think that whether or not a legend is essential depends on the 
length and content of your form.


If it's a multipage extravaganza then legends would certainly have 
accessibility benefits, but if it's just a simple form, with no 
distinct sets of questions, then just correctly using labels etc 
would satisfy most people. Using headers, legends and labels to 
indicate the same information has got to be more of an annoyance than anything.


I have found instances where a header, hidden legend, hidden label 
all read "name". 




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] is there a way to force legend text shows in TWO lines?

[Micky Hulse]

tee wrote:
Sorry, I'd have just vaguely realized screen reader does not read 
display none. Still, it creates markup noise and defeat the purpose of 
using legend


Great observation. :)

I know this is a Web Standards Group, so I probably should have kept my 
(e-mail) mouth shut. :D


Me personally: I tend to not be so strict about certain standards and/or 
practices... There are certain rules I am comfortable in bending.


Cheers,
Micky


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] is there a way to force legend text shows in TWO lines?

[russ - maxdesign]

Hey Paul,

1. almost all browsers left-indent the legend element to some degree. They
use different amounts, with IE being slightly different to most other
browsers.

2. This may have been mentioned in the thread before but FireFox will not
allow the legend element to be positioned at all. However, you can place a
span inside the legend and move this.

3. You can use relative positioning or negative margins to move the legend
to the left. If the positioning or negative margin is applied to the span
within the legend it will work across all browsers.

4. Then the only remaining issue is that IE is still slightly different to
other browsers.

So, you can use a conditional comment, serve IE a new style sheet, and
adjust the amount of relative position or negative margin - and this will
only affect IE - no other browser.

Why use a conditional comment linking to a new style sheet just for ie?

- it means you do not have to do any form of hack, you are simply rewriting
a rule
- if the browser becomes obsolete in the future you can simply remove the
conditional comment and style sheet - no need to hunt back through all of
your CSS to find work-arounds.

Like anything, everyone has their own opinion and their own solutions - this
is just one possibility :)

HTH
Russ


on 28/11/08 12:30 AM, Paul Collins at wrote:

> Hi all,
> 
> Just to elaborate on this one, has anyone ever found a way to remove the left
> indent on the legend element in IE? I don't care if I have to add a SPAN
> inside the LEGEND element, I just want to make sure the text will be left
> aligned correctly in all browsers.
> 
> Please send a link if you know a good one!
> Cheers




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

RE: [WSG] is there a way to force legend text shows in TWO lines?

[Paul Collins]

Hi all,

Just to elaborate on this one, has anyone ever found a way to remove the left 
indent on the legend element in IE? I don't care if I have to add a SPAN inside 
the LEGEND element, I just want to make sure the text will be left aligned 
correctly in all browsers.

Please send a link if you know a good one!
Cheers


-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of tee
Sent: Thursday, November 27, 2008 2:43 AM
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] is there a way to force legend text shows in TWO lines?


On Nov 26, 2008, at 6:15 PM, Ben Buchanan wrote:

>
> 2) I have a column that is 160px wide, but the text in legend is a bit
> longer, I added a span class, declared a width, but in Firefox, the
> text still refuse to run in two lines - the rest of the text simply
> get cut off when the words reaches 160px threshold. I really don't
> want to add a , and it will be more ridiculous to use a p tag
> for the text so that I can force it display exactly the way my client
> wanted, then use a negative text-indent to hide the legend.
> Did you set the span to display: block?
>
>
Yes, that is the first thing I did. No use.
Here is a quick page I just did.

http://lotusseedsdesign.com/csstest/legend.html

tee


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***





***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] is there a way to force legend text shows in TWO lines?

[Steven Faulkner]

hi tee,
this article gives you some idea of how screen readers use fieldsets/legends
http://www.paciellogroup.com/blog/?p=3

also worthwhile: Too much accessibility - FIELDSET LEGENDS
(http://www.rnib.org.uk/wacblog/articles/too-much-accessibility/too-much-accessibility-fieldset-legends/)

In your example, the legend includes instructional text.
I suggest a more appropriate legend would be "shipping estimate" and
the select elements label as "destination"



--
with regards

Steve Faulkner
Technical Director - TPG Europe
Director - Web Accessibility Tools Consortium

www.paciellogroup.com | www.wat-c.org
Web Accessibility Toolbar -
http://www.paciellogroup.com/resources/wat-ie-about.html


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] is there a way to force legend text shows in TWO lines?

[tee]

On Nov 27, 2008, at 12:37 AM, tee wrote:



On Nov 27, 2008, at 12:27 AM, Micky Hulse wrote:


...
...
E-mail Story to a friend

E-mail Story

It works for me. :)

Cheers,
Micky



Thanks Micky,

But isn't this defeats the whole purpose for using legend? I  
wouldn't care to use the legend at all if it weren't for the screen  
reader. With the above code, wouldn't  screen reader read the h5 and  
legend?  Wouldn't this creates unnecessary obstacle to screen  
reader? It seems to me it anounces the same sentence twice, one is  
louder, one is less louder and I can imagine I will get even more  
annoyed :-)


Sorry, I'd have just vaguely realized screen reader does not read  
display none. Still, it creates markup noise and defeat the purpose of  
using legend


tee


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] is there a way to force legend text shows in TWO lines?

[tee]

On Nov 27, 2008, at 12:27 AM, Micky Hulse wrote:


...
...
E-mail Story to a friend

E-mail Story

It works for me. :)

Cheers,
Micky



Thanks Micky,

But isn't this defeats the whole purpose for using legend? I wouldn't  
care to use the legend at all if it weren't for the screen reader.  
With the above code, wouldn't  screen reader read the h5 and legend?   
Wouldn't this creates unnecessary obstacle to screen reader? It seems  
to me it anounces the same sentence twice, one is louder, one is less  
louder and I can imagine I will get even more annoyed :-)


tee


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] is there a way to force legend text shows in TWO lines?

[Micky Hulse]

Maybe not the best solution, but I tend to set the legend to 
display:none (IIRC, one can't position off-screen in some browsers), and 
then insert a tad bit of additional HTML which is styled to emulate a 
legend... I call this class .pseudoLegend:


(CSS:)

/* Emulate : */
div.pseudoLegend {
background: #fff url(line.gif) repeat-x 0 50%; /* 5px X 1px */
margin: 15px 0 5px;
}
div.pseudoLegend h5 {
font-size: 85%;
font-weight: bold;
color: #575f6b;
text-transform: uppercase;
background-color: #fff;
margin: 0;
padding: 0 5px 0 0;
display: inline;
}
/* Hide certain elements for browsers without CSS: */
.hide { display: none !important; }

(HTML:)

...
...
E-mail Story to a friend

E-mail Story
...
...

It works for me. :)

Cheers,
Micky


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] is there a way to force legend text shows in TWO lines?

[tee]

On Nov 26, 2008, at 6:49 PM, Ben Lau wrote:


try white-space:normal...?


Thanks a lot. This works.

James, I accidentally deleted your message and empty my trash, so I am  
replying to your message in this post–thanks, this must be one of the  
best useful tips I have learned in year 2008.  I knew (well, sort of  
as I never try to dig in to find out more) that browsers must come  
with a style sheet for their UIs purpose, and I presumedly thought  
they will in no way getting into my style sheet, and, or shall I say,  
they must not.


It's rather disturbing and annoying to learn that the many battles,  
time wasted on trying to make the legend behaves in Firefox, that the  
whole culprit is from its style sheet. Don't know about you guys, but  
for me, it has always been a uphill battle to try to make sites as  
accessible as possible–the people I know but never met who care about  
accessibility is from this  group only; the people I know, have to  
work with or give me the jobs, care none about accessibility. There is  
no way one can justify the one whole hour being waste to make the  
legend displays correctly in FF and there is no way one can tell  
people who give the jobs that it's important to have the legend  
attribute when one couldn't get it works in one whole damn hour.   
These browser vendors, they are just not helping people like me and   
the  1% of web designers on earth who care the accessibility, all they  
added are countless frustration, time wasted and irritation and  
potentially turn people like me to become apathy to accessibility.



tee



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] is there a way to force legend text shows in TWO lines?

[James Ellis]

Hi

If there is CSS related issue that doesn't seem to want play nice, no matter 
what you do, it's probably a rule being set by the browser in its user agent 
stylesheet.
In firefox's case, it's in /res/forms.css (for forms). 
Have  
a peek at that stylesheet and you'll see all the rules it applies by default 
to forms. If you can't override the rules in that CSS using your own (try 
!important) then start Firebug, bring up the rule in the Style tab. In the 
'Options >' menu on the right you'll see an item called "Show User Agent CSS" 
- check that and you'll see the rules applied by Firefox to the relevant 
element.
If the rule is now struck out, then it is being applied. In the case of 
legend, the relevant rule is:
white-space : nowrap;

So Ben's suggestion below will override it.

Opera also has it's basic styles available in easy to read format, just search 
for them in the opera install dir. Not sure about Safari (I assume they are in 
some readable format). For IE, I doubt it.. it's still guesswork. they seem to 
be in  a compiled format last time I looked but maybe that has changed.

If all that fails. Set your legend to display : none and stick an h3 or 
something inside the fieldset below the legend, works just as well without the 
gutache.

HTH
James

On Thursday 27 November 2008 13:49:19 Ben Lau wrote:
> try white-space:normal...?
>
> On Thu, Nov 27, 2008 at 1:43 PM, tee <[EMAIL PROTECTED]> wrote:

> >>
> >>
> >>  Yes, that is the first thing I did. No use.
> >
> > Here is a quick page I just did.
> >
> > http://lotusseedsdesign.com/csstest/legend.html
> >
> > tee




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] is there a way to force legend text shows in TWO lines?

[Ben Lau]

try white-space:normal...?

On Thu, Nov 27, 2008 at 1:43 PM, tee <[EMAIL PROTECTED]> wrote:

>
> On Nov 26, 2008, at 6:15 PM, Ben Buchanan wrote:
>
>
>> 2) I have a column that is 160px wide, but the text in legend is a bit
>> longer, I added a span class, declared a width, but in Firefox, the text
>> still refuse to run in two lines - the rest of the text simply get cut off
>> when the words reaches 160px threshold. I really don't want to add a ,
>> and it will be more ridiculous to use a p tag for the text so that I can
>> force it display exactly the way my client wanted, then use a negative
>> text-indent to hide the legend.
>> Did you set the span to display: block?
>>
>>
>>  Yes, that is the first thing I did. No use.
> Here is a quick page I just did.
>
> http://lotusseedsdesign.com/csstest/legend.html
>
> tee
>
>
>
> ***
> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: [EMAIL PROTECTED]
> ***
>
>


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] is there a way to force legend text shows in TWO lines?

[tee]

On Nov 26, 2008, at 6:15 PM, Ben Buchanan wrote:



2) I have a column that is 160px wide, but the text in legend is a  
bit longer, I added a span class, declared a width, but in Firefox,  
the text still refuse to run in two lines - the rest of the text  
simply get cut off when the words reaches 160px threshold. I really  
don't want to add a , and it will be more ridiculous to use a  
p tag for the text so that I can force it display exactly the way my  
client wanted, then use a negative text-indent to hide the legend.

Did you set the span to display: block?



Yes, that is the first thing I did. No use.
Here is a quick page I just did.

http://lotusseedsdesign.com/csstest/legend.html

tee


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] is there a way to force legend text shows in TWO lines?

[Ben Buchanan]

> 2) I have a column that is 160px wide, but the text in legend is a bit
> longer, I added a span class, declared a width, but in Firefox, the text
> still refuse to run in two lines - the rest of the text simply get cut off
> when the words reaches 160px threshold. I really don't want to add a ,
> and it will be more ridiculous to use a p tag for the text so that I can
> force it display exactly the way my client wanted, then use a negative
> text-indent to hide the legend.

Did you set the span to display: block?

cheers,

Ben


-- 
--- 
--- The future has arrived; it's just not
--- evenly distributed. - William Gibson


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] is there a way to force legend text shows in TWO lines?

[Seona Bellamy]

2008/11/27 tee <[EMAIL PROTECTED]>:
> 2) I have a column that is 160px wide, but the text in legend is a bit
> longer, I added a span class, declared a width, but in Firefox, the text
> still refuse to run in two lines - the rest of the text simply get cut off
> when the words reaches 160px threshold. I really don't want to add a ,
> and it will be more ridiculous to use a p tag for the text so that I can
> force it display exactly the way my client wanted, then use a negative
> text-indent to hide the legend.

I can't be 100% sure on this, since I haven't played around much with
it, but one thing sprang out at me. I didn't think you could declare a
width on an inline element like a span unless you also set its display
to block. Could that be the problem here? If adding display:block to
your span works, then it is indeed a case of Firefox doing the right
thing an dthe others not. ;)

Cheers,

Seona.


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

[WSG] is there a way to force legend text shows in TWO lines?

[tee]

My tolerance for legend attribute is running extremely thin and the  
irritation I have for it is greater than IE6.


Two questions:
1) Can anyone absolutely positively confirm that without legend a site  
will cause suffering to screen reader's user or cause a traumatic  
effect to accessibility?


2) I have a column that is 160px wide, but the text in legend is a bit  
longer, I added a span class, declared a width, but in Firefox, the  
text still refuse to run in two lines - the rest of the text simply  
get cut off when the words reaches 160px threshold. I really don't  
want to add a , and it will be more ridiculous to use a p tag  
for the text so that I can force it display exactly the way my client  
wanted, then use a negative text-indent to hide the legend.


What is wrong with Firefox, why it refuses to fix this bug with so  
many upgrades??? Or it's not a bug but other browsers got it wrong and  
Firefox being self-righteous of its rightness Do we have Firefox  
developer here


tee




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***