WordPress.org

Ready to get started?Download WordPress

Forums

class for links overriding the other (4 posts)

  1. swanstitches
    Member
    Posted 4 years ago #

    I've got two types of links I want to display. The only difference between them is the color, since they're on different colored backgrounds. I've been going through and trying to fix this. No matter what I do, once I get the section I'm concentrating working on the right colors, the other section is overridden.

    • I've checked my tag nesting; the tag of one class "message" does not encompass get_sidebar(), where the class "direct" is located, and has not been imparting code that way (although at the moment, that's not the problem).
    • I've completely erased all link formatting and reentered it, to eliminate possible errors.
    • I've minimized all the color commands that might interfere with the links.
    • I've cleared my cache, shut down my browser and returned to make sure it wasn't my browser (Firefox).
    • The CSS validates and the HTML only is hung up on php. I've gone through both Firefox Web Developer and Firebug troubleshooting.

    So the only thing that I can think of that's causing the override is whichever class is last in the style sheet. The classes are clearly separated, so I don't know why they're interacting at all. What do I do now?

    Page with at least 6 links in the center column which should be visibly blue. The navigation links are operating properly. http://swanstitches.com/about

    http://swanstitches.com/swanstitches/wp-content/themes/swantheme/style.css

  2. alchymyth
    The Sweeper & Moderator
    Posted 4 years ago #

    as far as i can see from your syle.css, the links within the center have the same colors (#1c2e3b) as the links in the sidebar, and the same color as the text in the center:

    .message a:link, a:visited, a:active {
    color: #1c2e3b;
    text-decoration: none;}
    
    .message a:hover {
    color: #5a2231;
    text-decoration: none;}
    
    .direct a:link, a:visited, a:active {
    color: #1c2e3b;
    text-decoration: none;}
    
    .direct a:hover {
    color: #5a2231;
    text-decoration: none;}
    .heart {
    position: relative;
    float: left;
    width: 485px;
    left: 50px;
    padding-right: 25px;
    color: #1c2e3b;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    text-indent:25px;}

    and when i change the colors, in firefox/developer add-on, they act independant.

    btw: after changes to the css, it is advisable to clear the browser cache by pressing CTRL and F5 at the same time, or pressing the 'reload' button on the browser, to make the changes visible in the browser.

  3. swanstitches
    Member
    Posted 4 years ago #

    ... Am I really that tired?

    Geez. I should really learn to take a break once in a while.

    Thanks! Though I swear, it really wasn't working when I had it coded right! lol

  4. swanstitches
    Member
    Posted 4 years ago #

    It's doing it again. This time I double checked that the colors are different, and they are. ( ^_^;; ). The .direct is the last listed in my style sheet, and that's the one over-riding the other (.message). It's only happening on my blog posts page (index.php). My pages (page.php) is showing up properly. In my index.php, the class .message is called for after I call for the sidebar, so my .message is the last thing that should be called on, thus overriding .direct anyway, but it isn't. the class .direct is properly closed. Like I said before, they aren't overlapping and shouldn't be interacting at all.

Topic Closed

This topic has been closed to new replies.

About this Topic