Member Avatar for k2k

hi,
would someone please tell in where and what i should do to make my hovered link underlined? I tried so many attempts but none worked.. all it gave me is a "purple background color when the link is hovered" ... i really don't get it.. thanks

i have a separate css doc which contains the following:

a.nav:link {color:#FFFFFF; text-decoration: none; }
a.nav:visited {color:#FFFFFF; text-decoration: none; }
a.nav:hover {color:#FFFFFF; text-decoration:underline }
a.nav:active {color: blue; }

And the html codes is as follow: and linked to the external css file

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<link rel="stylesheet" type="text/css" href="css/text.css"/>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<body bgcolor="#333333" >
    
    <div id="menu">
    	<a href="http://www.yahoo.com" style="text-decoration:none"><b><font color="#FFFFFF">:: HENRY'S :: </font></b></a>
        
    </div>
</body>
  • 3 Contributors
  • 5 Replies
  • 86 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by ingeva
Member Avatar for kanaku

CSS inheritance works (more or less) in this way:

- checks your main (ie the a:link)
- checks the specific a:hover
- checks inline style

Your external CSS is correct in that it has text-decoration: underline in the a: tags BUT when it comes to rendering, the final say comes from this line of code in your html:

<a href="http://www.yahoo.com" [B]style="text-decoration:none"[/B]><b><font color="#FFFFFF">:: HENRY'S :: </font></b></a>

No matter what you specify in your external stylesheet, the inline CSS you use in your HTML will effectively overwrite everything else.

So remove that offending line in your HTML, and you'll be fine.

Member Avatar for ingeva 
a.nav:link {color:#FFFFFF; text-decoration: none; }
a.nav:visited {color:#FFFFFF; text-decoration: none; }
a.nav:hover {color:#FFFFFF; text-decoration:underline }
a.nav:active {color: blue; }

I think you should also change the above to:

a {color:#FFFFFF; text-decoration: none; }
a:hover {text-decoration:underline }
a:active {color: blue; }

or define class="nav" in your anchor statement.
I also deleted one line and removed one "color=#FFFFFF" here because you don't have to change what's already set.

Member Avatar for k2k

CSS inheritance works (more or less) in this way:

- checks your main (ie the a:link)
- checks the specific a:hover
- checks inline style

Your external CSS is correct in that it has text-decoration: underline in the a: tags BUT when it comes to rendering, the final say comes from this line of code in your html:

<a href="http://www.yahoo.com" [B]style="text-decoration:none"[/B]><b><font color="#FFFFFF">:: HENRY'S :: </font></b></a>

No matter what you specify in your external stylesheet, the inline CSS you use in your HTML will effectively overwrite everything else.

So remove that offending line in your HTML, and you'll be fine.

thanks very much, it surely answered the question.

Well, however, i figured out how to put the tags locally. it worked!

but when i have my css codes in an external file. i know my html connected to it because i used dreamweaver when i type class=" , the class in my external css file pops... however, the values didn't change.

again in my external css doc:

a.nav:link{color:#000000; text-decoration:none;}
a.nav:visit{text-decoration:none;}
a.nav:hover{text-decoration:underline;}

in my html (i only copied and pasted the things needed)

<head>
<link rel="stylesheet" type="text/css" href="css/text.css"/>
</head>
<a class="nav" href="http://www.yahoo.com" ><b>HENRY'S</b></a>

anything wrong? i went through all the tutorial and they showed like this too.

thanks

Member Avatar for k2k

never mind. i got it.

thanks to everyone helped.

Member Avatar for ingeva 
a.nav:visit{text-decoration:none;}

All I can see straight ahead is that you wrote "visit" instead of "visited".

What do you need the "nav" class for? Do you want to separate some links from the rest?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.