CSS effect and image links in IE 5.0

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

January 19th, 2004, 8:46 pm

If you still want to use the effect and disable it for older versions you could try adding a little bit of code to the htc file to sniff the browser version. This isn't 100% reliable because some browsers allow you to change how they report themselves, but it should work in this case I think since any non-IE browsers are going to ignore the htc file anyway. I don't have anyway to test the modifications because I don't have access to anything older than IE 6 right now, but perhaps ANTO/TW can give it a try when he has a chance. It should disable the effect in anything older than IE6 as it is set now and you can change it to IE 5.5 and up by changing the if to if(is_ie5_5up). This would be the new code for the .htc file:

Code: [ Select ]

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

<script language="javascript">
  var agt=navigator.userAgent.toLowerCase();
  var is_major = parseInt(navigator.appVersion);
  var is_minor = parseFloat(navigator.appVersion);
  var is_ie   = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
  var is_ie3  = (is_ie && (is_major < 4));
  var is_ie4  = (is_ie && (is_major == 4) && (agt.indexOf("msie 4")!=-1) );
  var is_ie4up = (is_ie && (is_major >= 4));
  var is_ie5  = (is_ie && (is_major == 4) && (agt.indexOf("msie 5.0")!=-1) );
  var is_ie5_5 = (is_ie && (is_major == 4) && (agt.indexOf("msie 5.5") !=-1));
  var is_ie5up = (is_ie && !is_ie3 && !is_ie4);
  var is_ie5_5up =(is_ie && !is_ie3 && !is_ie4 && !is_ie5);
  var is_ie6  = (is_ie && (is_major == 4) && (agt.indexOf("msie 6.")!=-1) );
  var is_ie6up = (is_ie && !is_ie3 && !is_ie4 && !is_ie5 && !is_ie5_5);

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

function domouseout()
{
    domouseover();
}

</script>

</public:component>

<public:component>
<public:attach event="onmouseover" onevent="domouseover()">
<public:attach event="onmouseout" onevent="domouseout()">
<script language="javascript">
var agt=navigator.userAgent.toLowerCase();
var is_major = parseInt(navigator.appVersion);
var is_minor = parseFloat(navigator.appVersion);
var is_ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1));
var is_ie3 = (is_ie && (is_major < 4));
var is_ie4 = (is_ie && (is_major == 4) && (agt.indexOf("msie 4")!=-1) );
var is_ie4up = (is_ie && (is_major >= 4));
var is_ie5 = (is_ie && (is_major == 4) && (agt.indexOf("msie 5.0")!=-1) );
var is_ie5_5 = (is_ie && (is_major == 4) && (agt.indexOf("msie 5.5") !=-1));
var is_ie5up = (is_ie && !is_ie3 && !is_ie4);
var is_ie5_5up =(is_ie && !is_ie3 && !is_ie4 && !is_ie5);
var is_ie6 = (is_ie && (is_major == 4) && (agt.indexOf("msie 6.")!=-1) );
var is_ie6up = (is_ie && !is_ie3 && !is_ie4 && !is_ie5 && !is_ie5_5);
function domouseover()
{
if(is_ie6up)
{
with(element)
{
filters.item(0).Apply();
filters.item(0).Play();
}
}
}
function domouseout()
{
domouseover();
}
</script>
</public:component>

The browser-sniffing code came from here:
http://www.mozilla.org/docs/web-develop ... _type.html

//edit

after reading your last post I think you would still have to use a separate class for the effect and apply it only to the textEffect to get around the height problem.

Try this for the content of your style sheet:

Code: [ Select ]

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

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}

a.textEffect{cursor:crosshair;height:1px;behavior:url(effect.htc);filter:progid:dximagetransform.microsoft.gradientwipe(duration=1)}
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}

and this for the main html file:

Code: [ Select ]

<html>
<head>
<title>test page</title>
<link rel="stylesheet" href="ozzu.css" type="text/css">

</head>
<body bgcolor=#000000>
 
 
<p align="center"><a class="textEffect" href="http://www.ozzu.com">Text Link Example</a></p>
 
 
<p align="center">

<a href="http://www.ozzu.com"><img src="donald.gif" border="0"></a>

</p>

</body>
</html>

<html>
<head>
<title>test page</title>
<link rel="stylesheet" href="ozzu.css" type="text/css">
</head>
<body bgcolor=#000000>
 
 
<p align="center"><a class="textEffect" href="http://www.ozzu.com">Text Link Example</a></p>
 
 
<p align="center">
<a href="http://www.ozzu.com"><img src="donald.gif" border="0"></a>
</p>
</body>
</html>

On an unrelated note, I don't think you want to have any <!-- comments in your external style sheet - those are only used in embedded style sheets that appear in the head portion of the html page itself.

Hopefuly, the browser-sniffing code will kill the javascript errors in older versions of IE and the separate css class will solve the height issue.

To save time I put the files on one of my websites where you can try them out to see if they cause the errors on IE 5: test files

Free Programming Resources

Anonymous
Bot
- www.ozzu.com
Joined: 25 Feb 2008
Posts: ?
Loc: Ozzuland
Status: Online

January 19th, 2004, 8:46 pm

ATNO/TW
Super Moderator
Joined: May 28, 2003
Posts: 23404
Loc: Woodbridge VA
Status: Offline

January 20th, 2004, 5:16 am

RichB - your sniffer worked perfectly to remove the script errors from IE5. And it did take the additional style class to get the image link to work right.

Here's the working link: http://atnopro.com/ozzu/test/test.html

The only difference was, I put the style internally to make it easier for anubi to view source, but the effect.htc file is exactly as you have it copied above.

And I agree -- he needs to get rid of the SGML comments in his external stylesheet. For anubi -- comments can be placed in the external style sheet, but they need to be done similar to this and should never surround the style code:

example

Code: [ Select ]

/* $TopStyle:URL=http://davgav.altervista.org/ozzu/ozzu.css$ */

"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
Joined: Dec 04, 2003
Posts: 72
Loc: Milan - Italy
Status: Offline

January 20th, 2004, 8:33 am

Perfect!
I have tried to modify the pages with the last changes and now i could say everything is ok.

I don't know how to thank you for your help, you were just gorgeus!!! :lol:

I think i have found out something more about the annoying "height:1px". As we supposed it was that one that made the link "not working" at the image. So, as the site of my friend has more or less 80 pages, and only a few with this problem, i thought it was not necessary to insert a separate class for every text link. So i started to try other edit possibilities to define a separate class for the linked images leaving the one for the text as it was. I eventually got a result adding this:

Code: [ Select ]

a.nofx{height:auto}

and inserting only class="nofx" in the image link.

This to complete what we were saying in the posts.
Again thank you for your help!

Davide

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

January 20th, 2004, 8:40 am

Excellent idea. I'll have to remember that one.

Free Programming Resources

ATNO/TW
Super Moderator
Joined: May 28, 2003
Posts: 23404
Loc: Woodbridge VA
Status: Offline

January 20th, 2004, 6:49 pm

What a great thread and a fun exercise. Since it was totally new to me, I did a bit of research today on htc files and discovered it's a component designed specifically for DHTML. Here's what Microsoft has to say about it and "behaviors" -- pretty good reading:

http://msdn.microsoft.com/library/defau ... tb_ovw.asp

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

January 20th, 2004, 7:01 pm

This is the reason for which ozzu it is the best!
where you finds other helpers therefore? :lol:

ATNO/TW
Super Moderator
Joined: May 28, 2003
Posts: 23404
Loc: Woodbridge VA
Status: Offline

January 20th, 2004, 7:08 pm

Yep!

ATNO/TW
Super Moderator
Joined: May 28, 2003
Posts: 23404
Loc: Woodbridge VA
Status: Offline

January 20th, 2004, 7:31 pm

anubi wrote:

This is the reason for which ozzu it is the best!
where you finds other helpers therefore? :lol:

I saw you struggling with this thread to get it the way you wanted it to sound, anubi. Trust me, I appreciate the fact that you're not perfect in English. Don't worry, you do way better than most who's first language is not English. I can always understand your posts.

If you're interested, the way I most likely would have said what you appeared to be trying to is "This is the reason that OZZU is the best! Where you find great help!"

Trust me, I couldn't even start a thread in Italian. I did take 3 years of Latin back in high school 27 years ago, but it doesn't help much other than to understand a few words.

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

January 20th, 2004, 7:39 pm

No problem with that ATNO/TW :wink:

I prefer to do a mistake in English and to have your corrections, rather than have you writing in italian

ghghghghhgh :lol:

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

January 20th, 2004, 7:41 pm

however, thanks for every correction on my way to write :wink:

ATNO/TW
Super Moderator
Joined: May 28, 2003
Posts: 23404
Loc: Woodbridge VA
Status: Offline

January 20th, 2004, 8:12 pm

Best I could do in Italian would be to use Alta Vista's Babel-Fish ( http://babelfish.altavista.com/ ), in which case my last post would come out like this in Italian:

Quote:

Li ho visti lottare con questo filetto per ottenergli il senso che lo avete desiderato suonare, anubi. Selo fidi di, io apprezzano il fatto che non siete perfetti in inglese. Non si preoccupi, voi fanno il senso più meglio di la maggior parte che abbia prima lingua non è inglese. Posso capire sempre i vostri alberini. Se siete interessati, il senso avrebbero detto molto probabilmente che a che cosa siete sembrato provare è "questo è la ragione per cui OZZU è il la cosa migliore! Dove trovate grande aiutare!" Selo fidi di, io non potrebbe neppure iniziare un filetto in italiano. Ho preso 3 anni di Latino indietro in High School 27 anni fa, ma non aiuta molto tranne a capire alcune parole.

I have no clue how close that translates, but it would be the best I could do.

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

January 20th, 2004, 8:22 pm

muahauahauahauahauah :lol:

It's the same I use when I am not sure of what I want to write!!! :lol:

... and the results it's maybe the same :wink:

ghghghgh

1, 2

To Reply to this topic you need to LOGIN or REGISTER. It is free.

Post Information

Total Posts in this topic: 27 posts
Users browsing this forum: No registered users and 149 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

CSS effect and image links in IE 5.0

Post Information

Sponsored Links

Other Languages

Website Development

Graphics

OS & Hardware

Internet Marketing

Marketplace

Community Area

Ozzu Maintenance

Forum Network

Forum Partners

Other Information