Welcome to WebmasterWorld Guest from 54.198.210.67

Forum Moderators: not2easy

Message Too Old, No Replies

Multiple Links per page

color change not working

     
6:23 pm on Mar 12, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:June 4, 2002
posts: 1830
votes: 3


I have spent several hours trying to figure out this link bug, experimenting and testing. I have 4 different link styles on a page (default links, leftmenu links, extra small links under pictures and links in footer). Everything is working except for the footer links are picking up the default links blue color instead of being gray. I haven't included the CSS for the other two as I have removed those temporarily and it doesn't change anything so I think it has something to do with default links.

Can anyone see a problem with my code?

Here is the CSS for the default links

/* default links w base font 16px */
a:link, a:visited {
color: #6495ED; /*light blue*/
font-weight: bold;
background: transparent;
text-decoration: none;
font-size:100%; }
a:hover {color: #37678E; } /*dark blue*/

Here is the CSS for the footer links:

a#footer:link, a#footer:visited {
color: #999; /* med gray*/
font-weight: bold;
background:transparent;
text-decoration: underline;
font-size:90%; }
a#footer:hover {
color:#ccc; } /*light gray */
6:28 pm on Mar 12, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:June 4, 2002
posts: 1830
votes: 3


PS. here is the HTML for the footer:

<div id="footer">
<a href="index.html">Home</a> |
<a href="about.html">About</a> |
<a href="contact.html">Contact</a>
</div>
6:38 pm on Mar 12, 2016 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Oct 17, 2005
posts: 5007
votes: 21


a#footer:link, a#footer:visited {

should be:

#footer a:link, #footer a:visited {
8:01 pm on Mar 12, 2016 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:14251
votes: 551


More stuff: (because Fotiman instantly homed in on the probable answer to your main question)
font-weight: bold;
background:transparent;
You don't need to say this over again (in the special-case CSS for links in the footer) unless you're still fiddling with the overall styles and you think you might end up having the footer links look different from the default links. In which case, remember to delete any redundancies before you go live. Anything that isn't different will be inherited.

Not sure why you need to say "background: transparent" at all, because what else would it be? Transparent is the default. If some containing element-- such as the overall footer-- has a background-image or fancy background-color, that isn't inherited.
1:28 am on Mar 13, 2016 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:June 4, 2002
posts: 1830
votes: 3


@Foitman. thanks. Your suggestion worked. I thought I had to put the anchor first. when there are multiple links on a page (according to an article I found). I had it the other way around at first and it didn't work.

@Lucy24 Thanks for the reminder re the redundant code.
1:52 am on Mar 13, 2016 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:14251
votes: 551


I thought I had to put the anchor first.

It's not so much about what goes first, as what's inside of what.

a#footer = an <a> element whose own id is "footer"
#footer a = any <a> element inside of some other element whose id is "footer"

An id has to be unique. So you can only have one "a id = 'footer'" per page, but if you have "div id = 'footer'" you can put lots of <a>s inside it.
9:21 am on Mar 13, 2016 (gmt 0)

Moderator from US 

WebmasterWorld Administrator keyplyr is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Sept 26, 2001
posts:10095
votes: 549


It also took me a while to get the concept of Cascading.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members