Styling lists with css and IE problem

[fractalbit]

Hello, i am making a simple effect with css on some links inside li tags.

Here is the css code:

#listn{
list-style: none;
padding: 3px;
margin: 3px;
}

#listn a{
border-left: 8px solid #AED1F7;
padding: 3px 0px 3px 3px;
}

#listn a:hover{
border-left: 8px solid #3D72AD;
padding: 3px 0px 3px 3px;
font: bold;
}

And the html for the li:
<li id="listn"><a href="javascript:;" onclick="javascript:toggleVisibility('techNewsid<?php echo $i; ?>');"><?php echo $subj; ?></a></li>

It renders perfectly in firefox and Opera, but in IE i have a serious problem. Inside the ul tag there are other links that are NOT inside li tags. Well the prolem is that IE will style those links exactly as the "listn" links! Why is this happenning? Any idea how to solve it?

[Arbitrator]

#listn{
list-style: none;
padding: 3px;
margin: 3px;
}

#listn a{
border-left: 8px solid #AED1F7;
padding: 3px 0px 3px 3px;
}

#listn a:hover{
border-left: 8px solid #3D72AD;
padding: 3px 0px 3px 3px;
font: bold;
}
And the html for the li:
<li id="listn"><a href="javascript:;" onclick="javascript:toggleVisibility('techNewsid<?php echo $i; ?>');"><?php echo $subj; ?></a></li>It renders perfectly in firefox and Opera, but in IE i have a serious problem. Inside the ul tag there are other links that are NOT inside li tags. Well the prolem is that IE will style those links exactly as the "listn" links! Why is this happenning? Any idea how to solve it?I hope that CSS is only being used to style that one link since each ID is only supposed to be used once per page (unlike classes). I'm also wondering why you would have anything inside a list (ul) element yet not inside of a list item (li) element; using invalid code like that would make just about anything a browser chose to do correct. And why are you using "javascript:;" inside the href attribute when it contains no JavaScript? There's no need to use "javascript:" within the value of the onclick attribute either since its value is implied to be JavaScript.

[fractalbit]

Thanks for the reply. The problem was that i had inside the ul, other things beside the li tags, as you said, so i changed to this:

<ul style="margin: 0px; padding: 0px;"><li class="listn"><a href="javascript:;" onclick="javascript:toggleVisibility('newsid<?php echo $i; ?>');"><?php echo $subj; ?></a></li></ul>

Also i changed #listn to .listn and as you can see use class instead of id.

As far as javascript is concerned, having href="javascript:;" is a nice trick that when you actually click the link it neither reloads the page, nor reposition it for example if you had href="#anchor". It executes the javascript you have in the onclick part without forcing your browser to do anything else, which is nice in my opinion. Try it and tell me what you think, or if you know a better method share it with us.

Thanks again.