0

I'm having trouble getting the "View Profile" link below to appear blue other than through inline styles.Please help or advise. Thanks

The Code:

.view_profile, .view_profile a {
    font-style: Georgia;
    font-size: 1.125em;
    color: #0B88B5;
    text-align: center;
    font-weight: bold;
}

.view_profile a {
    color: #0B88B5; 

}



    <div class="grid-5 profile_container">
      <a href="damon_r.html">
        <img src="images/damon_head.jpeg" class="profileimgsml" alt="Damon" />
          <div class="our_peopletxt">
        <div class="ourpeople_name">Damon</div>
          <p class="dotted_row"> ------ </p>
        <div class="ourpeople_designation">Office manager</div>
        <div class="ourpeople_details">
          <div class="contact_details_label">m:</div><a href="tel:9999999">  99 9999 999 </a><br>
             <div class="contact_details_label">e:</div><a href="mailto:damon@damon.com"> damon@damon.com</a><br>
        <p class="dotted_row"> ------ </p>
        <div class="view_profile"><a href="damon.html" style="color:#0B88B5;">View Profile</a></div>
        </div>
      </div>
          </a>
    </div>
11
  • Is some other CSS overriding the style for that element? Use inspect element in Chrome to find out which CSS is being applied to that element. Jul 1, 2013 at 14:45
  • 2
    have you tried using color: #0B88B5 !important; other css styles might be setting it and you need the !important to override. or setting the correct selector chain, some have precedence over others. Jul 1, 2013 at 14:46
  • 1
    Your code should work. Show it in context :)
    – fabien
    Jul 1, 2013 at 14:46
  • 2
    An anchor within another anchor is not allowed, even in HTML5: "The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links)." from w3.org: 4.6.1 The a element Jul 1, 2013 at 14:50
  • 2
    Using !important is a decent way to check if the issue is due to specificity, so trying it out isn't a bad idea. If it doesn't make a difference, it's not specificity causing it. Leaving it in as a final solution is a bad idea, however.
    – xec
    Jul 1, 2013 at 15:00

2 Answers 2

1

Have you tried !important?

It might be that other styles are overriding the rule you posted.

Try this:

.view_profile a {
    color: #0B88B5 !important; 
}

Use it with caution. It's the nuclear option. If this solves your problem you probably need to dig into the css and figure out why your rule was being overridden. Use firebug or the inspector tool in chrome to find those rules. Then maybe read up on how the cascade works.

Repeat if this works, you've only diagnosed the problem. To fix it you need to figure out how why your rule was being overridden. Open firebug and inspect your link, you'll see something like this: Firebug showing css rule being overriden

The rule you want is struck through because a more specific rule trumped it. There's another rule in your css somewhere that is more specific than .view_profile a. You need to update your rule to be more specific than the other, like: .grid-5 .view_profile a. If you post that rule we can help you solve the problem.

5
  • There's no reason to be using important here I don't think.
    – Ian Clark
    Jul 1, 2013 at 14:49
  • You think it's the wrapping anchor that's causing the problem?
    – Joe Flynn
    Jul 1, 2013 at 14:50
  • I agree. !important is a hack for people who either don't understand stylesheets or don't care enough to research the root problem. Advocate this now and another post about the same topic will just show up later but instead of specificity being an issue, it'll be an !important override issue. Jul 1, 2013 at 14:50
  • 1
    I think that the question from Mahalia Samuels is unclear and appears to work for me, but that nesting anchors isn't a very good practice, nor is using !important unless you have to. I don't see anything from the unclear question to suggest that he does.
    – Ian Clark
    Jul 1, 2013 at 14:53
  • No no no, reread the last part. If that worked, you're not done, you've just diagnosed the problem.
    – Joe Flynn
    Jul 1, 2013 at 17:03
0

You can see on this jsfiddle : http://jsfiddle.net/ETWQn/1/ that your code is working properly.

You should inspect the element with a web inspector to check all the properties applied.

You could try to give the full 'DOM path' of the element to be sure to overwrite any other style. For instance :

.grid-5 .view_profile a {properties}

is going to overwrite :

.view_profile a {properties}

Even if this is set before.

(btw, your markup has some unclosed tag but it should not cause any trouble ; in the fiddle, I added a correct markup)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.