Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Part of CSS Code (underline in hover only) Not Working!!!

Status
Not open for further replies.
john33

john33

Programmer
Sep 25, 2000
5
US
The ISSUE:
I want my hyperlinks to be without underline normally.
Then for certain ones, I want them to change color and have an underline appear when the mouse is on them (hovering), and for a second group of links, I just want them to change color when hovering.

The PROBLEM:
(Primary)In IE 5.0, the effect works the first time you go to the site. But once you click on any of the links (either those defined as Index or menu) (i.e. from the index.html page) and then return to the index.html page, the underline exists for the links defined as Index in the "link, active, visited" version. The only way I can find to make sure that the underline does not appear is to either (1) Manually Clear the History Bar or (2) set the style sheet to A.Index: hover {text-decoration:none} but that is not the effect I'd prefer.

(Secondary) The "hover" style sheet does not work in Netscape 4.7. Is this just the way it is or is there additional code that I could use for Netscape to recognize the intent?


The CODE:
I used the following <head> code:

<head>
...meta tags...

<style type=&quot;text/css&quot;>
<!--
A.Index:link {text-decoration:none; color: #0000A0;}
A.Index:active {text-decoration:none; color: #0000A0;}
A.Index:visited {text-decorattion:none; color: #0000A0;}
A.Index:hover {text-decoration:underline; color: #0066FF;}

A.menu:link {text-decoration:none; color: #A8ACB9;}
A.menu:active {text-decoration:none; color: #A8ACB9;}
A.menu:visited {text-decoration:none; color: #A8ACB9;}
A.menu:hover {text-decoration:none; color: black}
-->
</style>

</head>

And used the following <body> code:

...other html...
<a href=&quot;About.html&quot; Class=Index>COMPANY NAME</a>
...other html...
<a href=&quot;ClientLogin.html&quot; CLASS=menu>Client Login</a>


Any suggestions are greatly appreciated. Thanks.
 
Sort by date Sort by votes
in netscape i believe you could jsut use onMouseOver(Out) events to achieve the same effects...



jared@aauser.com
 
Upvote 0 Downvote
Jaredn, thanks for the help with Netscape -- but that still doesn't seem to work. That is fine though; hopefully Netscape 6.0 will be more excepting.

I figured out my problem with IE, and I'll let you all know just incase you have the same problem.

SOLUTIONS
(1) Put a general style code first:

Code: 
<style type=&quot;text/css&quot;>
<!--
A {text-decoration:none;}

...the rest...
-->
</style>

(2) Create a document (.css) that holds all the stylesheet items -- this is nice because then you can use this one file for the entire site and only have to change attributes in one file instead of all web pages later on.

Code: 
<head>
<link rel=stylesheet href=&quot;nameOfDocument.css&quot; type=&quot;text/css&quot;>
</head>
 
Upvote 0 Downvote
Unfortunately, it's true that Netscape lacks the stuff to give you your a.hover style effects. As far as I'm aware, if you're going to try to use onMouseOver and such to mimic IE's fx [using pure text, that is; you could always do the old rollover image method, but the style and bandwidth police will come after you], the necessary JavaScripting will involve a ton of document.write() includes, and the whole thing will become a lot bigger than would be desired. At least that's my guess ... I can't say I've ever actually seen it done that way. (If you have, please hook me up with a URL!)

I've given up on a spiffy/practical implementation of hover fx in Netscape, but include the a.hover code for the viewing pleasure of those using - and I say this somewhat grudgingly - the superior browser from you-know-who.
 
Upvote 0 Downvote
I agree with listing the styles in the following order

A:link
A:visited
A:hover
A:active

But Dreamweaver insists on putting the styles on my stylesheet in alphabetical order, thus a:hover is above a.link and a.visited. How can I change the order in a Dreamweaver stylesheet?
 
Upvote 0 Downvote
I've messed with this on and off for 3 days and 3 minutes after I ask the question I found the problem.

I had the Page Properties set for link, active and visited to #000000. It was &quot;over powering&quot; the stylesheet and wouldn't let the red hover work, after the link had been clicked on once. As soon as I deleted the colors on the Page Properties it started working.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
293
3esolar
3
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
381
spamjim
spamjim
bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
330
bdwilcox
bdwilcox
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
627
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
323
pmonett
pmonett

Part and Inventory Search

Sponsor

Back
Top