On 24 Mar 2007, at 21:55, brian wrote:
> .ImageReplace, .ImageReplace li { letter-spacing: -1000em !important;
> background-repeat: no-repeat;}
If you had the following mark up:
<ul class="imageReplace">
<li><a href="">Home</a></li>
</ul>
Would now the UL be shifted 1000em left, closely followed by the LI
inside the UL?
Traditionally the mark-up for IR tends to be something like:
<ul>
<li><a href="" class="imageReplace" id="homeLink">Home</a></li>
</ul>
Styling (including PNG replacement):
.imageReplace {
text-indent: -1000em;
background-repeat: no-repeat;
display: block; /* important for IE to make it respect width/
height */
}
#homeLink {
width: width_of_image;
height: height_of_image;
text-decoration: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(enabled=true, sizingMethod=scale, src='/image.png');
}
#homeLink[imageReplace] {
background-image: url(path/to/image.ext);
}
To make the CSS validate you may need to remove the filter to an
external CSS file referenced via a conditional comment.
Referenced PNG hack from:
http://www.daltonlp.com/view/217
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
