WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Hiding Legends

for

From: Keith Parks
Date: Oct 15, 2008 4:30PM

On Oct 15, 2008, at 1:48 PM, Dean Hamack wrote:

> Working on a form now and am having trouble hiding the legend. I
> have it set
> up in the usual way:
>
> legend {position:absolute;left:0px;top:-500px;height:1px;
> font-size:1px;overflow:hidden}
>
> It's 1 pixel tall, but it's staying right where it is and it's
> visible on
> screen.

(Assuming you don't get talked out of the whole idea by Yukka... ;^)

I think you're using more tricks than are necessary. And your
positioning spec's could be being influenced by its containing
elements, etc.

Typically I find negative margin to be reliable, so something like...

legend { position: absolute; width: 100px; overflow:hidden; margin-
left: -500px; }
fieldset { position: relative; }

The width and overflow settings are just back-ups, which would only
come into play if you have a lot of text in your legend.

My 2¢,

Keith

******************************
Keith Parks
Graphic Designer/Web Designer
Student Affairs Communications Services
San Diego State University
San Diego, CA 92182-7444
(619) 594-1046
mailto: <EMAIL REMOVED>
http://www.sa.sdsu.edu/communications

http://kparks.deviantart.com/gallery
----------------------------------------------------------

World Peace through Cascading Style Sheets.