css block list nav spacing and class issue

two part question regarding list nav displayed as block:

url:
http://ochies.com/cps/110809/sub.html

css:
http://ochies.com/cps/110809/cps.css
line # 287 to 362


first issue: I cant get rid of the spacing around my li. To see it clearly, I added a "background-color: 999" to see where the space issue is. I added "0" on margins, paddings on ul, li, a but no luck.

second issue: I created another class ".first" (line #340) for the first line navigation. I wanted the first left nav to have no space above so it aligns with the main content header (line #344). For some reason, its not talking on the padding i assigned. its still taking the main a: link padding instead of .first. Is my syntax correct?


Thank you in advance.

Hello tuba74,

To get rid of the space, delete this bit in red -
.gotop a:active{
float: right;
padding: 3px;
color: #4a6783;
font-weight: bold;
font-size: 11px;
text-decoration: none;
}

.gotop a:hover{
float: right;
padding: 3px;
color: #4a6783;
font-weight: bold;
font-size: 11px;
text-decoration: none;
background-color: #d7dde2;
}

ol li {
padding: 5px;
}

ul li {
padding: 5px;
}

/*SUBNAV STARTS*/

#subnav {
font-size: 12px;
margin: 0;
padding: 0;
}

#subnav ul {
margin-top: 0px;
margin-left: 0px;
margin-right: 25px;
padding-left: 0px;
width: 142px;
display: block;
}


You have the confusing habit of naming classes and id's the same. The .first and #first threw me for a bit ...

You are giving your #subnav ul li an id of first, in your markup you have <li id="first">

But, in your CSS you are styling a class -
/*TOP SUBNAV SET*/


#subnav ul li .first a:link {
background-color: #999;
color: #333;
text-decoration: none;
padding: 0px 0 10px 0;
display: block;
margin: 0px;
}

#subnav ul li .first a:visited {
color: #333;
}

#subnav ul li .first a:active {
color: #333;
}

#subnav ul li .first a:hover {
color:#336699;
}

/*TOP SUBNAV SET*/