RE: Image replacement techniques fail with IE accessiblity settin gs

Tom

brief test only but the positioning differs in IE6 and Moz Firebird. Also the <h1> overflows it's allocated space in IE6 causing scrollbars to appear :-( 
I've no doubt that this is 'just' cross-browser css problems but given that the purpose of image replacement is to candify a page they probably make a lot of difference to some people.

Julian

> -----Original Message-----
> From: Tom Croucher [mailto:tcroucher@netalleynetworks.com]
> Sent: Friday, December 05, 2003 10:17 AM
> To: Jon Dodd - Bunnyfoot
> Cc: w3c-wai-ig@w3.org
> Subject: Re: Image replacement techniques fail with IE accessiblity
> settings
> 
> 
> 
> Yes. I made an accessible Image replacement technique, which  
> unfortunately contains some semantic chaff. However it works 
> and it, or  
> something based on it is the only way to make accessible image  
> replacement with CSS2. This is due to the fact that all image  
> replacement currently uses background: for including the 
> images. I have  
> explored the possibility of removing some of the <span> tags 
> from the  
> markup using before: and after: but concluded that since IE doesn't  
> support and Opera, Mozilla, and Safari badly support them it is not  
> workable at the moment. However I would love someone to use them to  
> find something which would work in the future.
> 
> This works on the idea of having a container element which has two  
> spans in it, one for the text and an empty one for the image. Within  
> the container these are then overlayed the image over the text. The  
> container can be put anywhere happily with the image 
> replacement still  
> working. In this example a <h1> is used but a <span> could be used  
> equally well.
> 
> <html>
> <head>
> 
> <style>
> #logoimage {
>   	/* Must use position to cause the overlap */
>           position: absolute;
> 	background: url('helloworld.gif') top left no-repeat;
> 	height: 31px;
> 	width: 214px;
> 	padding: 0;
> 	margin: 0;
> 	z-index: 1;
> }
> 
> #logo {
> 	/* Must use position to cause the overlap */
>           position: absolute;
> 	overflow: auto;
> 	height: 31px;
> 	width: 214px;
> 	padding: 0;
> 	margin: 0;
> 	z-index: -1;
> }
> 
> #logocontainer {
>          /* Must have same height and width as the 
> replacement image */
>          height: 31px;
>          width: 214px;
> }
> 
> </style>
> 
> </head>
> 
> <body>
> <br />
> <br />
> <h1 id="logocontainer"><a href="#" id="logo">Hello World!</a><span  
> id="logoimage"></span></h1>
> 
> </body>
> 
> </html>
> 
> The image used in this code example is available at  
> <http://www.netalleynetworks.com/Members/tcroucher/accessibility/ 
> helloworld.gif>
> 
> There is a "test" page for this at  
> <http://www.netalleynetworks.com/Members/tcroucher/accessibili
ty/nnir>  
mostly because I haven't had the time to write it up properly.


I hope this is a decent solution that people are happy with.


Tom

The information in this email is confidential. The contents may not be disclosed or used by anyone other than the addressee.  If you are not the addressee, please tell us by using the reply facility in your email software as soon as possible. Sheffield City Council cannot accept any responsibility for the accuracy or completeness of this message as it has been transmitted over a public network.  If you suspect that the message may have been intercepted or amended please tell us as soon as possible.

Received on Friday, 5 December 2003 05:27:43 UTC