CSS effect and image links in IE 5.0

  • anubi
  • Student
  • Student
  • User avatar
  • Joined: Dec 04, 2003
  • Posts: 72
  • Loc: Milan - Italy
  • Status: Offline

Post January 19th, 2004, 3:40 pm

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
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post January 19th, 2004, 3:40 pm

  • RichB
  • Guru
  • Guru
  • User avatar
  • Joined: May 17, 2003
  • Posts: 1121
  • Loc: Boston
  • Status: Offline

Post January 19th, 2004, 4:48 pm

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

Code: [ Select ]
<a style="behavior: none" href="http://www.ozzu.com"><img src="donald.gif" border="0">


and it that doesn't work:

Code: [ Select ]
<a style="behavior: none;filter: none" href="http://www.ozzu.com"><img src="donald.gif" border="0">


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.
Free Programming Resources
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Joined: May 28, 2003
  • Posts: 23407
  • Loc: Woodbridge VA
  • Status: Offline

Post January 19th, 2004, 5:15 pm

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.
"There's no place like 127.0.0.1 except for ::1."
Alexandria Networks. Leader in IT consulting for associations/non-profits, and small to medium sized businesses around the northern Virginia and Washington D.C. metro area.
  • RichB
  • Guru
  • Guru
  • User avatar
  • Joined: May 17, 2003
  • Posts: 1121
  • Loc: Boston
  • Status: Offline

Post January 19th, 2004, 5:31 pm

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.
Free Programming Resources
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Joined: May 28, 2003
  • Posts: 23407
  • Loc: Woodbridge VA
  • Status: Offline

Post January 19th, 2004, 5:48 pm

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?
"There's no place like 127.0.0.1 except for ::1."
Alexandria Networks. Leader in IT consulting for associations/non-profits, and small to medium sized businesses around the northern Virginia and Washington D.C. metro area.
  • RichB
  • Guru
  • Guru
  • User avatar
  • Joined: May 17, 2003
  • Posts: 1121
  • Loc: Boston
  • Status: Offline

Post January 19th, 2004, 5:55 pm

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.
Free Programming Resources
  • anubi
  • Student
  • Student
  • User avatar
  • Joined: Dec 04, 2003
  • Posts: 72
  • Loc: Milan - Italy
  • Status: Offline

Post January 19th, 2004, 6:11 pm

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:

Code: [ Select ]
a{cursor:crosshair;height:1px;behavior:url(effect.htc);filter:progid:dximagetransform.microsoft.gradientwipe(duration=1)}


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 ):

Code: [ Select ]
a{cursor:crosshair;height:1px;}


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


RichB wrote:
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.


How can I do that?
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Joined: May 28, 2003
  • Posts: 23407
  • Loc: Woodbridge VA
  • Status: Offline

Post January 19th, 2004, 6:13 pm

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.

Code: [ Select ]
<public:component>
<public:attach event="onmouseover" onevent="domouseover()">
<public:attach event="onmouseout" onevent="domouseout()">

<script language="javascript">

function domouseover()
{
with(element)
{
 filters.item(0).Apply();
 filters.item(0).Play();
}
}

function domouseout()
{
with(element)
{
 filters.item(0).Apply();
 filters.item(0).Play();
}
}

</script>

</public:component>
  1. <public:component>
  2. <public:attach event="onmouseover" onevent="domouseover()">
  3. <public:attach event="onmouseout" onevent="domouseout()">
  4. <script language="javascript">
  5. function domouseover()
  6. {
  7. with(element)
  8. {
  9.  filters.item(0).Apply();
  10.  filters.item(0).Play();
  11. }
  12. }
  13. function domouseout()
  14. {
  15. with(element)
  16. {
  17.  filters.item(0).Apply();
  18.  filters.item(0).Play();
  19. }
  20. }
  21. </script>
  22. </public:component>
"There's no place like 127.0.0.1 except for ::1."
Alexandria Networks. Leader in IT consulting for associations/non-profits, and small to medium sized businesses around the northern Virginia and Washington D.C. metro area.
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Joined: May 28, 2003
  • Posts: 23407
  • Loc: Woodbridge VA
  • Status: Offline

Post January 19th, 2004, 6:16 pm

anubi wrote:

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




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.
"There's no place like 127.0.0.1 except for ::1."
Alexandria Networks. Leader in IT consulting for associations/non-profits, and small to medium sized businesses around the northern Virginia and Washington D.C. metro area.
  • RichB
  • Guru
  • Guru
  • User avatar
  • Joined: May 17, 2003
  • Posts: 1121
  • Loc: Boston
  • Status: Offline

Post January 19th, 2004, 6:28 pm

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.

Code: [ Select ]
<!--
a.textEffect{cursor:crosshair;height:1px;behavior:url(effect.htc);filter:progid:dximagetransform.microsoft.gradientwipe(duration=1)}
a:link, a:visited, a:active{COLOR:#8173D5; TEXT-DECORATION: none; font-weight: bold}
a:hover{COLOR:#CCCCFF; TEXT-DECORATION: none; cursor: crosshair}
-->
  1. <!--
  2. a.textEffect{cursor:crosshair;height:1px;behavior:url(effect.htc);filter:progid:dximagetransform.microsoft.gradientwipe(duration=1)}
  3. a:link, a:visited, a:active{COLOR:#8173D5; TEXT-DECORATION: none; font-weight: bold}
  4. a:hover{COLOR:#CCCCFF; TEXT-DECORATION: none; cursor: crosshair}
  5. -->


and then apply the textEffect class:

Code: [ Select ]
<p align="center"><a class="textEffect" href="http://www.ozzu.com">Text Link Example</a></p>


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

Code: [ Select ]
<!--
a.textEffect{cursor:crosshair;height:1px;behavior:url(effect.htc);filter:progid:dximagetransform.microsoft.gradientwipe(duration=1)}
a.textEffect:link, a.textEffect:visited, a.textEffect:active{COLOR:#8173D5; TEXT-DECORATION: none; font-weight: bold}
a.textEffect:hover{COLOR:#CCCCFF; TEXT-DECORATION: none; cursor: crosshair}

a.imageLink{/* whatever properties you want for your image links */}
etc etc
-->
  1. <!--
  2. a.textEffect{cursor:crosshair;height:1px;behavior:url(effect.htc);filter:progid:dximagetransform.microsoft.gradientwipe(duration=1)}
  3. a.textEffect:link, a.textEffect:visited, a.textEffect:active{COLOR:#8173D5; TEXT-DECORATION: none; font-weight: bold}
  4. a.textEffect:hover{COLOR:#CCCCFF; TEXT-DECORATION: none; cursor: crosshair}
  5. a.imageLink{/* whatever properties you want for your image links */}
  6. etc etc
  7. -->


then use class="textEffect" for your text links and class="imageLink" for your links that have images inside them.
Free Programming Resources
  • anubi
  • Student
  • Student
  • User avatar
  • Joined: Dec 04, 2003
  • Posts: 72
  • Loc: Milan - Italy
  • Status: Offline

Post January 19th, 2004, 6:28 pm

ATNO/TW wrote:
anubi wrote:

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




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.


The question is just that...
I'm not so expert and I doesn't know how exactly can I do that :cry:
Can you show me an example please?
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Joined: May 28, 2003
  • Posts: 23407
  • Loc: Woodbridge VA
  • Status: Offline

Post January 19th, 2004, 6:43 pm

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:

Code: [ Select ]
function domouseout()
{
with(element)
{
 filters.item(0).Apply();
 filters.item(0).Play();
}

}

*Added note
(filters.item(0).Apply(); is line 20)
  1. function domouseout()
  2. {
  3. with(element)
  4. {
  5.  filters.item(0).Apply();
  6.  filters.item(0).Play();
  7. }
  8. }
  9. *Added note
  10. (filters.item(0).Apply(); is line 20)


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...
"There's no place like 127.0.0.1 except for ::1."
Alexandria Networks. Leader in IT consulting for associations/non-profits, and small to medium sized businesses around the northern Virginia and Washington D.C. metro area.
  • anubi
  • Student
  • Student
  • User avatar
  • Joined: Dec 04, 2003
  • Posts: 72
  • Loc: Milan - Italy
  • Status: Offline

Post January 19th, 2004, 6:56 pm

yes, it's a very curious thing.

Infact if I reduce the code to:

Code: [ Select ]
<!--
a{height:1px}
-->

<!--
a:link{COLOR:#8173D5; TEXT-DECORATION: none; font-weight: bold}
a:visited{COLOR:#8173D5; TEXT-DECORATION: none; font-weight: bold}
a:active{COLOR:#8173D5; TEXT-DECORATION: none; font-weight: bold}
a:hover{COLOR:#CCCCFF; TEXT-DECORATION: none; cursor: crosshair}
-->
  1. <!--
  2. a{height:1px}
  3. -->
  4. <!--
  5. a:link{COLOR:#8173D5; TEXT-DECORATION: none; font-weight: bold}
  6. a:visited{COLOR:#8173D5; TEXT-DECORATION: none; font-weight: bold}
  7. a:active{COLOR:#8173D5; TEXT-DECORATION: none; font-weight: bold}
  8. a:hover{COLOR:#CCCCFF; TEXT-DECORATION: none; cursor: crosshair}
  9. -->


I have the link doesn't work
As if I remove only the "height:1px" from the line, the link works
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Joined: May 28, 2003
  • Posts: 23407
  • Loc: Woodbridge VA
  • Status: Offline

Post January 19th, 2004, 8:13 pm

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.
"There's no place like 127.0.0.1 except for ::1."
Alexandria Networks. Leader in IT consulting for associations/non-profits, and small to medium sized businesses around the northern Virginia and Washington D.C. metro area.
  • anubi
  • Student
  • Student
  • User avatar
  • Joined: Dec 04, 2003
  • Posts: 72
  • Loc: Milan - Italy
  • Status: Offline

Post January 19th, 2004, 8:46 pm

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. :shock:
hope to read you tomorrow!
thanks again for your help!!! :wink:
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post January 19th, 2004, 8:46 pm

Post Information

  • Total Posts in this topic: 27 posts
  • Users browsing this forum: No registered users and 89 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.