Grow your CSS skills. Land your dream job.

Trouble Styling Anchor Tags

  • # April 27, 2009 at 10:12 pm

    I have been working on a page for my company. The site is using WordPress, and is on the company’s internal server so I am unable to provide a link.

    Everything was styling as expected until I began styling the sidebar menu. As I added styles to the anchor tags for link, visited, hover, etc. things were looking the way that I wanted in my preview with CSSEdit 2.6. When I began double checking the styles in Firefox 3.10 and Safari 4.0 Beta, I noticed that the anchor styles in my header and footer were being effected by the styles in the sidebar. I specified the styles in the sidebar by calling out the sidebar <div>. The sidebar div is not nested in any way (at least from what I can tell) within the header or the footer except within the overall wrap <div>. The wrap includes minimal anchor styling for general link color, etc.

    I have had to override all of the sidebar styles within the header and the footer to put everything back the way it was while maintaining the sidebar styles. I will include some code snippets of the sidebar styles and the footer overrides. I have also includes a few screenshoots of what I am seeing in CSSEdit 2.6 and Firefox. You will have to scroll down to the bottom to see what I am describing in the photos.

    Code:
    div#sidebar a:link, a:visited, a:active {
    display: block;
    padding: 10px;
    border-bottom: 1px dotted silver;
    position: relative;
    top: -18px;
    color: #FFFFFF;
    text-decoration: none;
    }
    div#sidebar a:hover {
    color: #FFFFFF;
    background-color: #3FA621;
    }
    Code:
    #footer a {
    display: inline;
    border-style: none;
    color: #009a32;
    padding: 0px;
    top: 0px;
    }

    [attachment=1]CSSEdit 2.6.jpg[/attachment]

    [attachment=0]Firefox.jpg[/attachment]

    Any suggestions. It could just be my lack of understanding of CSS. I am a relative newbie with this. If you need any more information, please let me know.

    Thanks,

    Stampy74

    # April 28, 2009 at 1:04 am

    Hey man,

    I think I see the problem… You have:

    Code:
    div#sidebar a:link, a:visited, a:active {

    Each comma starts a totally new item, so you probably meant to say:

    Code:
    div#sidebar a:link, div#sidebar a:visited, div#sidebar a:active {

    Let me know if that works for you.
    Ashton Sanders

    # April 28, 2009 at 10:31 am

    Good call Ashton,

    I knew it was something straightforward that I was overlooking. Your change worked like a charm.

    Thanks again,

    Stampy74

    # April 28, 2009 at 11:45 am

    Excellent.

    You’re welcome.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".