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
  • 103 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Member #360561

Dani AI

Generated

Thanks to and for the pointers — the thread shows the immediate cause was found. The following checklist and tips help diagnose and prevent similar link-styling problems in the future.

  • Use the browser inspector (Elements/Styles and Computed panes) to see which rule actually sets text-decoration or any background color and which file it comes from. The inspector also shows overridden rules and specificity. See a short guide to developer tools here: What are browser developer tools?
  • Confirm the stylesheet is truly loaded at runtime: check the Network tab for the CSS file, and make sure the link element is placed in the document head. Editor autocompletion (Dreamweaver hints) only reads files — it does not prove the browser applied those rules.
  • Small typos in selectors or pseudo-class names silently stop rules from matching. Also check selector specificity when a rule “does nothing” — a more specific rule elsewhere can win. Read more about specificity here: CSS specificity
  • Keep markup semantic and avoid deprecated presentational tags. Use CSS for color and weight, and add a :focus style to match :hover so keyboard users can see link state.
  • If you must override an existing rule you cannot change, increase selector specificity or, as a last resort, use !important sparingly.
  • Note: modern browsers limit what can be changed for visited links for privacy reasons. That can affect what styles you expect to see on visited anchors; see details here: :visited pseudo-class

Following these steps makes it faster to spot the real source of a styling conflict and keeps link styles consistent and accessible.

Recommended Answers

All 5 Replies

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 Member #360561 
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 Member #360561 
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.