text-decoration: none not working on ul

Question

I've seen a lot of questions relating to this subject but none of them answered my question. I am making a sidebar for a site and I'm trying to make the links in boxes that are the same width as the sidebar, have just a little padding, maybe 10-15px and a tiny bit of space between each. Maybe 3px. But I can't seem to get text-decoration: none; to work no matter what I've tried.

This is the most successful code I've gotten so far:

HTML

<div id= "sidebar">
    <h3>Navigation Links</h3>
    <div id= "sidelinks">
        <ul>
            <li><a href= "#">Home</a></li>
            <li><a href= "#">Biography</a></li>
        </ul>
    </div>
</div>

CSS

#sidebar {
    background: #464646;
    width: 250px;
    height: 1000px;
    margin-left: 50px;
    border-radius: 15px;
}
h3 {
    font-family: 'Coda', cursive;
    color: white;
    background: #6B6B6B;
    font-size: 24px;
    text-align: center;
    padding: 15px 0 8px 0;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}
#sidelinks {
    font-family: 'Armata', sans-serif;
    font-size: 25px;
    text-decoration: none;
    color: white;
    background-color: #4D4D4D;
    padding: 10px;
    position: relative;
}

Cheviot

Answer 1

Removing the text-decoration and setting the colour is easy

#sidelinks a {
    color:black; 
    text-decoration:none;
}

So is removing the dots

#sidelinks ul {
    list-style:none;
    padding:0;
    margin:0;
}

If you look at the CSS you posted none of it was actually targeting <a> or <ul> so not sure why you were expecting other style than the default ones.

The fiddle doesn't have everything but it should send you in the right direction: http://jsfiddle.net/eNUpJ/

Poseidon

I was expecting the CSS I used to work for everything in the #sidelinks div. I guess I have a lot more to learn. I'm still studying. I'm also trying to get these links in separate boxes separated just a little. Maybe 3px. I can't seem to make that happen. I even tried putting the links in separate divs and that didn't even work. I just succeeded in overlapping the boxes. The boxes should have at lease 10px padding on top and bottom and 20px on the left and they are 250px wide. I'm totally lost on that. – Cheviot

Answer 2

add it reset css , I think you have to learn about css reset http://meyerweb.com/eric/tools/css/reset/

a {text-decoration: none;}

or

#sidelinks a {text-decoration: none;}

Outmoded

CSS reset are not a magical way to resolve all CSS issues nor do they have to be used and if you go down that road normalize CSS is more recommended than CSS reset this days. – Poseidon