Bradley Wright wrote:
> 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?
The ULs & LIs are absolutely positioned.
>
> Traditionally the mark-up for IR tends to be something like:
>
> ...
>
> To make the CSS validate you may need to remove the filter to an
> external CSS file referenced via a conditional comment.
>
I should have been more clear in my query. I have PNG transparency
working in IE--i've done this many times before. What i'm hung up on
right now is trying to find one method which allows for the replaced
elements to also be links.
As for which method i'm using, this is how i would generally handle it
(though i've tried several others for this site):
-- normal css file --
#en_about, #en_about_on
{
left: 10px;
top: 40px;
width: 43px;
height: 22px;
background-image: url('/images/nav/en/about.png');
}
#en_about_on, #en_about:hover
{
background-image: url('/images/nav/en/about_on.png');
}
-- ie-only css file (using CC) --
#en_about, #en_about_on
{
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='/images/nav/en/about.png',sizingMethod='image');
height: 22px;
voice-family: "\"}\""; voice-family: inherit;
height: 0px;
}
#en_about_on, #en_about:hover
{
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='/images/nav/en/about_on.png',sizingMethod='image');
height: 22px;
voice-family: "\"}\""; voice-family: inherit;
height: 0px;
}
The problem lies in the fact that these are also links. The
AlphaImageLoader filter is keeping the links from being clickable.
I'm sure there must be a CSS-only solution out there, but i'm also open
to any ideas involving javascript (hey--it's still a CSS issue though).
Last night i wrote up some javascript that would create a new image
object based on the source of the background image, place it inside the
link, then remove the BG image. My reasoning was that IE seems to be
able to deal with having a link around a transparent image element[1],
just not so much for background images. I think i'm close to something
that works, but i'd really like to not have to do this.
Why is the world's worst browser also the worst to debug?
[1] If one also treats the page's PNGs properly upon page load:
http://boring.youngpup.net/_projectDirectories/sleight/sleight.js
brian
______________________________________________________________________
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/
