8 {{ upvoteCount | shortNum }}
8 {{ upvoteCount | shortNum }}

Text display issue with CSS - any advice?

by jonnyrottan
7 replies
  • WEB DESIGN
    • |
Hi all,

I have 'inherited' some css and have tried to make some changes.

What I have is:

.footerlink a:link { color: #FFFFFF; font-family: Arial, Geneva, Arial, Helvetica, sans-serif; font-size: 8pt; text-decoration: none }
.footerlink a:focus { color: #FFFFFF; font-family: Arial, Geneva, Arial, Helvetica, sans-serif; font-size: 8pt; text-decoration: none }
.footerlink a:hover { color: #FFFFFF; font-family: Arial, Geneva, Arial, Helvetica, sans-serif; font-size: 8pt; text-decoration: underline }
.footerlink a:active { color: #FFFFFF; font-family: Arial, Geneva, Arial, Helvetica, sans-serif; font-size: 8pt; text-decoration: none }

What I was expecting was that the text that is hyper linked would be white (#FFFFFF) and would not be underlined, when the text is hovered over it would then appear underlined. (and be white)

What I got was the hyper linked text was the usual blue color and also underlined and when hovered over the text appeared white and underlined.

Can anyone tell me what changes will need to be made to the css code to produce the behavior that I am after?,

Namely: The text that is hyper linked will display white (#FFFFFF) and not the hyper linked blue color and will not be underlined and when the text is hovered over it will appear underlined and remain white.

Thanks in advance,

JR
#advice #css #display #issue #text
  • Profile picture of the author Mike Baker
    You forgot to add a semi colon to the end of all them.

    So it should look like this
    Code:
    .footerlink  a:link { color: #FFFFFF; font-family: Arial, Geneva, Arial, Helvetica,  sans-serif; font-size: 8pt; text-decoration: none; }
.footerlink a:focus { color: #FFFFFF; font-family: Arial, Geneva, Arial,  Helvetica, sans-serif; font-size: 8pt; text-decoration: none; }
.footerlink a:hover { color: #FFFFFF; font-family: Arial, Geneva, Arial,  Helvetica, sans-serif; font-size: 8pt; text-decoration: underline; }
.footerlink a:active { color: #FFFFFF; font-family: Arial, Geneva,  Arial, Helvetica, sans-serif; font-size: 8pt; text-decoration: none; }
    Signature

    {{ DiscussionBoard.errors[3077633].message }}
  • Profile picture of the author jonnyrottan
    Hi mikescos,

    Thanks for the feedback but implementing the changes did not have any affect on the display...

    Cheers,

    JR
    {{ DiscussionBoard.errors[3077838].message }}
  • Profile picture of the author Mike Baker
    Can you post the html code for your footer please?
    Signature

    {{ DiscussionBoard.errors[3077891].message }}
    • Profile picture of the author jonnyrottan
      Hi mikescos,

      The footer is in a php file, the contents I post below:

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


      <p class="footerlink">Copyright 2009-2011; :: <span class="footerlink"> <a href="customercare.php">Contact U</a></span><a href="customercare.php">s</a> :: <a href="privacypolicy.php"> Privacy Policy</a> :: <a href="termsandconditions.php">Terms &amp; Conditions</a></p>

      Cheers,

      JR
      {{ DiscussionBoard.errors[3077977].message }}
  • Profile picture of the author Mike Baker
    Try this.

    HTML
    <p><span class="copyright">Copyright © 2009 - 20011</span> <a class="footerlink" href="customercare.php">Contact Us</a> :: <a class="footerlink" href="privacypolicy.php">Privacy Policy</a> :: <a class="footerlink" href="termsandconditions.php">Terms Conditions</a></p>
    CSS
    <style type="text/css">
    a.footerlink:link {
    color:#fff;
    text-decoration:none;
    }
    a.footerlink:visited {
    color:#fff;
    text-decoration:none;
    }
    a.footerlink:hover {
    color:#fff;
    text-decoration:underline;
    }
    body,td,th {
    color: #fff;
    }
    a {
    font-size: 8pt;
    }
    .copyright {
    font-size: 8pt;
    }
    Signature

    {{ DiscussionBoard.errors[3078070].message }}
  • Profile picture of the author SteveJohnson
    You're most likely having specificity issues - an earlier declaration of styles for "a" is overriding what you want. A good indication of that is that your hover declaration IS working...

    Start adding container selectors BEFORE your .footerlinks declaration to increase the specificity. Start with the p tag your links are in:

    p.footerlinks a

    If that's not enough, find the next container up that the <p> tag lives in. Say it's a <div> with id of 'content':

    div#content p.footerlinks a

    It should only take one or two selectors in front of the .footerlinks to solve your problem.

    BTW - there is no such selector as a:focus. You should remove that line so it doesn't cause problems.

    If you're going to use the complete a: attribute set, you need to declare them in a specific order. Think LoVe HAte:
    a:link {}
    a:visited {}
    a:hover {}
    a:active {}
    Signature

    The 2nd Amendment, 1789 - The Original Homeland Security.

    Gun control means never having to say, "I missed you."

    {{ DiscussionBoard.errors[3078895].message }}
    • Profile picture of the author jonnyrottan
      Hi mikescos,

      Thanks for the code- it works a treat!

      Thanks also to SteveJohnson, did not have to go down that path but looked like a good starting point.

      JR
      {{ DiscussionBoard.errors[3082344].message }}

Trending Topics