Re: Image replacement techniques fail with IE accessiblity settin gs

Julian,

I tested it on Mozilla, IE 6, Opera 7 and Safari. After rechecking it 
still seems fine in my copy of IE. You need to make sure all the 
heights and widths are the same as the image. Feel free to send me 
exact version numbers of your browsers.

Tom

On 5 Dec 2003, at 10:27, Scarlett Julian (ED) wrote:

>
> 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:40:43 UTC