Trouble Styling Anchor Tags

[Stampy74]

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

[AshtonSanders]

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

[Stampy74]

Good call Ashton,

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

Thanks again,

Stampy74

[AshtonSanders]

Excellent.

You’re welcome.

[Author]

Posts