RE: Display: none

There is the Gilder/Levin Method for image replacement (which I haven't
tested) but appears to solve the images-turned-off problem.  The only
thing to keep in mind is that you can't use transparent backgrounds with
this method.

<h3 id="header">
	<span></span>Revised Image Replacement
</h3>

/* css */
#header {
	width: 329px;
	height: 25px;
	position: relative;
	}
#header span {
	background: url(sample-opaque.gif) no-repeat;
	position: absolute;
	width: 100%;
	height: 100%;
}

Source: http://www.mezzoblue.com/tests/revised-image-replacement/ 


Juan C.  Ulloa  ( "Ooh-yo!-ah" ) 
julloa@bcc.ctc.edu           :-)   


> -----Original Message-----
> From: w3c-wai-ig-request@w3.org [mailto:w3c-wai-ig-request@w3.org] On
> Behalf Of David Dorward
> Sent: Tuesday, March 14, 2006 10:59 AM
> To: w3c-wai-ig@w3.org
> Subject: Re: Display: none
> 
> 
> On Tue, Mar 14, 2006 at 10:50:50AM -0800, Paul Novitski wrote:
> > h1
> > {
> >         overflow: hidden;
> >         width: 150px;
> >         height: 0px;
> >         padding-top: 20px;
> >         background: url("../images/this_is_my_title.gif") left top
> >         no-repeat;
> > }
> > I like this a lot because it doesn't require any extraneous
> > markup.  I'm not aware of any disadvantages to this technique and
> > would appreciate hearing about any.
> 
> Style sheets on but images off (or even just background images off, as
> is the default for printing on most browsers) and the user gets
> nothing.
> 
> Also, if the user increases their font size, the image won't resize,
> possibly leaving it in the state "Still too small to read".
> 
> --
> David Dorward
http://dorward.me.uk
>

Received on Tuesday, 14 March 2006 19:11:48 UTC