List Nav Alignment

Hi –
Attached is the problem, which occurs only in IE (sorry – the page isn’t online yet). The list should have none of the darker teal color showing between the list items.
Here’s the CSS:

[code]#left-nav {
float: left;
display: block;
background-color: transparent;
width: 140px;
font-family: verdana, arial,sans-serif;
margin: 0;
padding: 0;}

#left-nav img {
padding: 0;
margin: 0;}

#left-nav .content-lh ul {
padding: 0;
margin: 0;}

#left-nav .content-lh ul li {
display: block;
list-style-type: none;
margin-top: 0;
margin-bottom: 0;
padding: 0;
font-size: .7em;
line-height: .7em;
letter-spacing: -0.05em;
font-weight: bold;
height: auto;}

#left-nav .content-lh ul li a {
display: block;
padding: 7px 1px;
margin:0;
color: black;
background-color: #aac5b9;
text-decoration: none;
line-height: 1em;
border-bottom: 1px solid #fff;
height: auto;}

#left-nav .content-lh p a {
color: black;}

#left-nav .content-lh p a:hover, #left-nav .content-lh ul li a:hover {
color: #fff;}

#left-nav .content-lh ul li a:hover { background-color: #568c74;}

#left-nav .content-lh p {font-size: .72em;}

#left-nav .content-lh hr {
color: #8dbd60;
border-top: 1px solid black;
text-align: left;
margin-right: 6px;}[/code]

and the HTML:

[code]<div id=”left-nav”>
<div class=”content-lh”>
<ul>
<li><a href=”#”>Event Calendar</a></li>
<li><a href=”#”>Chuck’s Column</a></li>
<li><a href=”#”>Request a Sermon Transcript</a></li>
<li><a href=”#”>Submit a Prayer Request</a></li>
<li><a href=”#”>Naomi’s Notes</a></li>
<li><a href=”#”>Event Scrapbook</a></li>
</ul>
</div>
</div>[/code]

If you can figure out how to space these items so that the dark teal background doesn’t show through (and still allow for text resizing – this has to be accessible) I’d really appreciate it.
Thanks,
KDLA

[upl-file uuid=0cd4c60d-4659-446a-a1de-c81645e16148 size=8kB]Screen002.jpg[/upl-file]

Also in #CSS _↴