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 Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

am i blind? basic as can be css question 2

Status
Not open for further replies.
jjblazer

jjblazer

Technical User
Feb 12, 2004
6
US
a {color: #000066; text-decoration: none;}
a:link {color: #000066; text-decoration: none;}
a:visited {color: #000066; text-decoration: none;}
a:active {color: #000066; text-decoration: none; }
a:hover {color: #0000FF; text-decoration: underline;}

a.bluelink {color: #0000ff; text-decoration: none;}
a.bluelink:link {color: #0000ff; text-decoration: none;}
a.bluelink:visited {color: #0000ff; text-decoration: none;}
a.bluelink:active {color: #0000ff; text-decoration: none; }
a.bluelink:hover {color: #0000FF; text-decoration: underline;}

a.boldlink {color: #000066; text-decoration: none; font-weight: bold;}
a.boldlink:link {color: #000066; text-decoration: none; font-weight: bold;}
a.boldlink:visited {color: #000066; text-decoration: none; font-weight: bold;}
a.boldlink:active {color: #000066; text-decoration: none; font-weight: bold;}
a.boldlink:hover {color: #000066; text-decoration: underline; font-weight: bold;}


so tell me - why does the 'underline' attribute not work? no links appear underlined when they are moused over, though the a.boldlink:hover does indeed turn 'bold'

thanks for any help you can toss my way

 
Sort by date Sort by votes
jjblazer, I just checked and it works just fine. Try clearing your cache and see if it works again.

[sub]
____________________________________
Just Imagine.
[sub]
 
Upvote 0 Downvote
First thing that springs to mind is the hierarchy or the order of the pseudo classes. W3 states that pseudo classes need to be presented in a fixed order to work properly. The order is:

:link
:visited
:hover
:active

Some browsers still render the changes even if the order is incorrect but some won't. That said, you can simplify your css considerably:

1. a and a:link is actually the same attribute
2. if nothing changes, you do not need to specify that attribute

your css could look like this:
Code: 
a:link, a:visited        { color: #000066; text-decoration: none; }
a:hover     { color: #0000FF; text-decoration: underline; }

a.bluelink:link, a.bluelink:visited { color: #0000ff; text-decoration: none;}
a.bluelink:hover { text-decoration: underline; }

a.boldlink:link, a.boldlink:visited { color: #000066; text-decoration: none; font-weight: bold; }
a.boldlink:hover   { text-decoration: underline; }
 
Upvote 0 Downvote
Simpler still:
Code: 
a {color: #000066; text-decoration: none;}
a:hover {color: #0000FF; text-decoration: underline;}

a.bluelink {color: #0000ff;}
a.bluelink:hover {text-decoration: underline;}

a.boldlink {font-weight: bold;}
a.boldlink:hover {color: #000066; text-decoration: underline;}
All links will take on the characteristics assigned by the a {} rule; if they have a class, these characteristics will be augmented/overridden by the a.class {} rule; if the link's being hovered, the :hover rule makes a further adjustment. You don't need to define each rule from scratch.

As to why it's not working for you - like Gujumodel says, it's probably the browser caching an old css file. I find it safest to define all my styles inline in a <style> tag in the document's <head> when working on CSS. Move it to an external CSS file when you're happy with the look. Holding down the shift key when you refresh the page should force it to reload everything from scratch too.

Failing that, what browser are you using?

-- Chris Hunt
 
Upvote 0 Downvote
thanks, GUJU, Vragabond and Chris - i found the problem (some garbage code tacked on at the end of the file in some goofy .table thing - it wasn't supposed to be there and it had all its own lovingly defined link attributes which were of course at odds with everything else... grrr... file sharing is SUCH a pain)

i appreciate you responding, thanks a bunch!!

: )
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
745
spamjim
spamjim
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
384
pmonett
pmonett
PeDa
  • Locked
  • Question
CSS two level horizontal menu
Replies
0
Views
306
PeDa
PeDa
PeDa
  • Locked
  • Question
Horizontal rule and CSS problem 2
Replies
2
Views
338
PeDa
PeDa
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
436
spamjim
spamjim

Part and Inventory Search

Sponsor

Back
Top