CSS effect and image links in IE 5.0

Hey everyone,
I've been helping a friend of mine in putting a link effect on a personal web site.
I have been having a problem with IE 5.0.
The IE 5.0 seems to have some incompatibility problems and by clicking the link, it's not able to open it.
I have just made a very simple page to show how it works:

http://davgav.altervista.org/ozzu/ozzu.html

As you can see both links points on OZZU page but by using IE 5.0 and clicking on the image, it just doesn't work.
The image acts like a simple grafic and the page shows errors.
This as long as i have this effect on the image.
By a perfectly normal link, it works perfectly.

Can anyone help me to disable the effect on the image so that the link works properly?
I have tried some solutions read here in ozzu, but with poor results.
I cannot make those links work on IE 5.0

Can anyone help with that?

Thanks
Davide

You should be able to disable the effect by using an inline style on the image link. Have you tried:



and it that doesn't work:



I'm a little curious as to why you're using height: 1px in the default style for your links. Is this related to your effect somehow? I'm not really familiar with CSS behaviors, but I'm wondering if setting the height to 1px isn't the thing that's causing the problem with IE 5 and the image link. Perhaps before trying to disable the effect you should just try removing that and see what happens.

Interesting effect. Rich B suggested possibly the easiest solution. I suppose the other one would be to create two separate classes for the anchor tag - one for images and one for text.

I imagine you are aware of the fact that that's mostly a proprietary IE thing and "behavior" is only supported by IE 5.0 +, "cursor" at least by NS 6 and Opera 7, "filter" again only by IE, but from 4.0 +

In fact until this post, I never knew those existed.

To answer Rich B's question about the 1PX height, that is a positioning value, and appears to dictate when the Crosshares appear and disappear on mouseover -- you can see that for yourself. When you mouseover the text, if you go beyond 1 pixel in any direction, the mouse reverts to norm.

Well the crosshairs should appear whenever you're over the element and disappear whenever you leave it, so I'm still not sure what the 1px has to do with it. If the height value expanded the size of the element then I could see how it might have an effect by enlarging the element and therefore the space in which the crosshairs would appear - I use a similar effect with display:block and line-height: xx to make css menu links that are all the same size. But I don't understand how setting it to a smaller value will have any effect, since the cursor should revert as soon as you leave the element anyway.

I see what you're saying. I'm really curious about this myself since this is a new one on me. It appears that the crosshairs are only one pixel, so perhaps that's the determining factor?

I just downloaded the files and tried removing the height value and the effects don't seem to work without it, I don't know why that is since I've never used the effects before, but I think separate classes for text and image links would be the way to go as you suggested unless it's just the one image.

Yes, I have already tried both the solution you have proposed.

About the height:1px: I have found it "as it is" in various example on the net.
Like this ---> http://tutes.goddess-glow.com/css/linktrans.html

I have already tried removing the code above:



and in that way i have the image links to works in IE 5.0, so i think the way to solve my problem is disabling that effect on image links.
The curios thing is that i can obtain the same if i remove only the height:1px.

So, i have reduced the code above to something like this ( only for a test ):



And the result is the same. The image link doesn't work.




How can I do that?

I hear ya RichB -- I just did the same and changed the pixel height. Didn't seem to be any difference.

I thought the .htc file was interesting as well...I'd never seen anything like that until now.

Then make two separate anchor classes as I suggested above...one for text and one for images. Do the text one as you already have and make it class "effect" (or something creative)...then just leave your image class normal.

It certainly sounds like the 1px height is causing the problem with IE 5. One option that I'm fairly certain would work would be to give the effect itself a class name and then selectively apply it to the text links where you want to have it.



and then apply the textEffect class:



If you want to change the other aspects of the image links then create two entirely separate classes as ATNO/TW suggests:



then use class="textEffect" for your text links and class="imageLink" for your links that have images inside them.

The question is just that...
I'm not so expert and I doesn't know how exactly can I do that
Can you show me an example please?

I tried the style class approach, but no joy. Here's what's happening with IE 5. You're getting an invalid arguement on line 20 in the effect.htc file:



It appears the effect code has a compatability issue with IE 5 and may not be related to the CSS at all. I'm still curious about that Pixel height thing...

yes, it's a very curious thing.

Infact if I reduce the code to:



I have the link doesn't work
As if I remove only the "height:1px" from the line, the link works

Yep -- it's definately a browser version conflict with the javascript - not the CSS. I just did up this small page here: http://atnopro.com/ozzu/test/test.html

Using the same instructions you had from here:
http://tutes.goddess-glow.com/css/linktrans.html

Works perfect on IE 6, but I get the same javascript error on IE 5 -- apparently it's not supported by older versions.

I agree with you for the javascript errors.

But, as I wrote before I have tried to reduce the code ( for a test ) to only:

a{height:1px}

discarding of any "behavior" stuff there...

I have tried also to remove the .css file and adding:

style="heigth:1"

inside the <a> tag for the image link.
And in both cases that is sufficient to have the image link doesn't work.

I think there are 2 kinds of problems there:

1) the javascript errors for incompatibility with the old browsers
2) the "heigth:1px" that cause the image link doesn't work

It would be sufficient for me to have the link working, even if then there is the error

Do you think is impossible to have that?


-------------

after this I go to bed... here is 4:35 a.m.
hope to read you tomorrow!
thanks again for your help!!!