link styles in a list inside a div

cant get it right ...

[stef25]

i have a div id="area_dest" with a list of <ul> <li> all of which are <a>

why do the unvisited <a> appear underlined and without margin? once i click on them they appear the way i want them too ... the a: doesnt seem to work but the a:visited does ...?

could i use something like #area li a:link, a:visited{

?

---
current relevant css:

#area_dest a:link, a:visited{
margin: 1px;
color: #333333;
letter-spacing: 1px;
text-decoration: none;

}

#area_dest a:hover {
background-color:#ececd9;

}

#area_dest {
position:absolute;
top:196px;
font-size:10px;
width: 353px;
text-align:right;
visibility:hidden;
text-decoration:none;
padding-left:335px;
letter-spacing:1px;

}

#area_dest li {
margin: 1px;
display: inline;
list-style-type: none;
font-family: Geneva, Arial, Helvetica, sans-serif;
border-width: thin;
border-style: dashed;
border-color: #cccccc;
background-color:#dadab6;
margin: 1px;
color: #333333;
letter-spacing:1px;
text-decoration:none;

}

[Wrapdida]

a:active?

[Span]

Instead of this:
#area_dest a:link, a:visited {

you need this:
#area_dest a:link, #area_dest a:visited {