List problem

[sriindira]

Just can u tell me how can image replacement be done in a ul list using the method u just suggested?

I need to have something like

<ul>
<li><a>Some link</a>
blah
blah
</ul>

i want the anchor text to be visible in screen reader and i also want a image for each of the anchor links how shld i go abt doing this.

One way i found out was

eg:

<ul>
<li><a>some link</a></li>
blah..
blah...

the problem it gave in IE5/win was that the background imagemoved along with the anchor

i had given the anchor the background url and said text-indent:-9000px

after some trail and error what i did was i wrapped up the somelink text in a span like this

<li><a id="someid"><span class="remove">some link</span></a></li>

for the anchor the code was

a{
display:block;
height:37px; //height of each image was 37px;
}

span.remove{
display:block;
margin-left:-9999px;
}
#someid{
background-image: url(images/image.jpg);
}

this worked in all browsers IE5/win/mac , IE5.5 , IE 6,opera,firefox,safari.

Even screen reading was possible


However in many sites they were sugesting this method to use , namely assigning the parent element "position:relative" and child element
"position absolute"

i tried this in my header

<h1 id="header"><a href="#" target="_blank" title="some title">Title for Website</a></h1>

#header{
position:relative;
background-image: url(images/header.jpg);
height:122px;
}

#header a{
position:absolute;
text-indent:-2000px;
overflow:hidden;
}

However this method had a bug in IE5/mac where h1 wrapped the divs that wereafter the h1 element and they were hidden in view while this method worked in all browsers


So could someone suggest me a correct way to go abt doing this image replacement technique in UL list