CSS/hover

hover is not supported by NS4.xx I think it is supported by NS6.

cross-browser solution

Mark,

Thanks for the reply, but this solution works great with IE, but still does not work with NS. In fact, I get an error message, "style is not defined". Any thoughts? Thanks again.

Bob

try ommouseOver="this.style.color"='#rrggbb';"

Andy,

Thanks, but still no good. Stil works with IE, but not NS. This time I get an error, "this.style.color has no properties". Thanks.

Bob

just another wee idea for you.

try using this order for the css elements

a:link {color:blue}
a:hover {color:red}
a:active {color:blue}

Lanmedia,

Thanks for trying, but that still does not work with NS.

Bob

First, the rules in CSS are in order of use:

a:link
a:active
a:visited
a:hover

And it must be in that order to work properly.

Seconding, a:hover doesn't work in Netscape 4.x -- it's not supported. But it is in Netscape 6.0 + and Opera 5.

Suzanne

Suzzanne,

Thanks! You think some day all browsers will be fully compatitble?

Bob

Hi Suzanne,
The second part of your answer and possibly what Bob is most concerned about (regarding a:hover not working in Netscape) no doubt, is correct as it is well documented.

However, can you please supply information as to the certainty of the css order because I have found the one I posted above does work for me!
There is also a tutorial on this at http://www.thepattysite.com/dreamweaver/linkstyles.html

Link
Visited
Hover
Active
is the quoted and emphasised order here.

If you got time might be worth finding out what http://validator.w3.org/ have to say on the matter.

Why are there so many conflicting ideas/standards on the order??

Maybe We can clear up the confusion once and for all :=)

According to http://www.w3.org/TR/REC-CSS1#appendix-a (and where else would you look), the order is LINK, VISITED, ACTIVE. Hover isn't in that standard .. because it is not supported.

um ... seems to me that that's exactly what I said in the very first answer to this thread:)

edits to add: take at look at http://www.insidedhtml.com/tips/styles/ts31/page1.asp which discusses the Netscape issue and provides a gruesome work-around.

Andy,

I guess you're right - we should have stopped with your original answer! I also found that gruesome workaround for Netscape. I actually got it to work, but decided to bag it since it was so rediculously complex in order to do the same thing that CSS/IE does so simply. My Netscape users will have to be satisfied with a link that does not change color! Thanks again.

Bob

you got my JS code to work?
what was the problem?
(I only have NN6, nothing earlier, so I couldn't test it)

Mark,

No I didn't get your code to work. I was talking about the solution that AndyB had mentioned at:

http://www.insidedhtml.com/tips/styles/ts31/page1.asp

It works, but is very involved. I didn't think it was worth adding that complexity to my code.

Bob

Hi all,

I never used Netscape, so I can't confirm whether or not this works:

workarounddemo.htm

Text Rollovers: An Example - Doc JavaScript

<script LANGUAGE="JavaScript">
Dynamic HTML Lab, who came up with the idea for this script. Be sure to check out his interesting columns, and his great list of JavaScript-related links.
// -->
</script>
<script LANGUAGE="JavaScript" SRC="workaround.js"></script>

An Example
Try the following links (move the mouse over them) with Netscape Navigator 4.0x or Microsoft Internet Explorer 4.0:
Netscape
Microsoft

workaround.css

.item { color: blue }
.highlight { color: red }

workaround.js

var bName = navigator.appName;
var bVer = parseInt(navigator.appVersion);
var NS4 = (bName == "Netscape" && bVer >= 4);
var IE4 = (bName == "Microsoft Internet Explorer" && bVer >= 4);

function display(id, str) {
if (NS4 || IE4) { // if browser supports style sheets
if (NS4) { // if Navigator 4.0+
with (document[id].document) {
open(); // open document
write(str); // write to document
close(); // close document
}
} else { // Internet Explorer 4.0+
document.all[id].innerHTML = str; // "assign" to element
}
}
}

function swapClass(text, spName, urlName, oldName, clName, over) {
if (bVer < 4) { // old browser
return; // terminate the function
}

// create a new string for the link
// change the link's class to clName (it was oldName before)
var str = "";
} else {
// replace onMouseOut with onMouseOver
// replace false with true
str += " onMouseOver=\"swapClass(\'" + text + "\', \'" + spName +
"\', \'" + urlName + "\', \'" + clName +
"\', \'" + oldName + "\', true)\">";
}
str += text + "";
display(spName, str); // update the code
}

Hugh

ahhhh

Once you start using layers you might as well just use images. At least that way it will work in all browsers that support JavaScript.