Ok I've never really had a problem styling links, and this is driving me nuts, so maybe someone can shed some light on this for me.

First I have all the links on my pages pretty much the same by the following declaration in my stylesheet

#content a, #content a:visited {
    color:#C2C0BA;
    border-bottom: 1px solid #333333;
    text-decoration:none;
}
#content a:hover {
    border-bottom:1px solid #ED145A;
    color:#C2C0BA;
}

Then I have a section (div class: prev-posts-title) that I don't want to have the underlines, what would be the best way to accomplish this? Seems pretty simple right?

.prev-posts-title a:link, .prev-posts-title a:visited {
    border: none;
}
.prev-posts-title a:hover {
    border: none;
}

Now since my links reside within the div class: prev-posts-links like so..

<div class="prev-posts-title"><a href="whatevber.com">hyperLINK</a></div>

Why are my links ignoring that style i setup for that particular class, and just inheriting my #content link style?

I've tried adding a class to my actual link like this:

<a href="whatever.com" class="nounderline">HYPERLINK</a>

then of course adding something like this to my stylesheet:

a.nounderline:link {
border: none;
}
a.nounderline:visited {
border: none;
}
a.nounderline:hover {
border: none;
}

I've tried to use span in place of my divs, no dice.

No matter what I try the underlines remain stubborn


I do notice if i use an actual div id="prev-posts-title" instead of a class...it will work fine...but for some unknown reason I've gotten into a habbit of using classes for smaller, less important areas on my website while div IDs control the main areas/blocks. Is there a downfall to using too many div id's and not using div classes?

for example the block this is all going within is considerd div id="prev-posts" now inside this main block i have several areas, for the post title, post date etc..all which are in their own div class, should i be using div id's div classes or span classes? I've seen each technique used, what is the BEST? and proper way?

Any Ideas?

Thanks in advance

Instead of using "border: none;" use "text-decoration:none;"

Originally Posted by angele803

Instead of using "border: none;" use "text-decoration:none;"

They are infact bottom borders...because I'm using a different color than the text...plus I have text decor set to none...

I found my solution which was the following:

#content .prev-post-title a:link {
border: none;
}

etc..

was missing the #content in the begging.

Thanks for your response any ways!