CSS Left Divide /<ul><li> has line in middle

Works in IE

[renvac]

Hi Everyone -
I joined a couple of weeks ago and have enjoyed reading all the posts! I am fairly new to CSS.
I made a page with top navigation, left nav, content and right nav. Page validated - I have 2 problems

First: Works fine in IE but in Mozilla and Netscape in the left boxes in the center there is a line that goes across the box side to side - Shows head, then list 3 links - line underneath, and then my next 2 links. In IE there is no line there and I dont want it! Below is the code that I have.

Second: I put: list-style-position: inside; -
So the text wasnt flush against the left side but in Mozilla and Netscape it puts it right against left side. I tried text-indent: 3px; which workded in Mozilla and Netscaped but acted weird in IE.

I hope I explained myself okay and that this wasnt too long! :)
Any help would be appreciated!

div#sidebar {
position: absolute;
font-family: arial,helvetica,sans-serif;
top: 150px;
left: 10px;
width: 200px;
font-size: 76%
}

div#sidebar div.specs {
font-family: arial,helvetica,sans-serif;
color : white;
background-color : #000000;
font-size: .9em;
border: 0;
margin-bottom : 12px;
padding: 2px;
line-height : 140%;
}

div#sidebar div.specs ul{
margin : 0;
padding : 0;
line-height : 140%;
list-style-type: none;
list-style-position: inside;
}
div#sidebar div.specs ul li{
color: black;
background-color : white;
}
div#sidebar div.specs ul li a{
color : black;
background-color : transparent;
text-decoration : underline;
}

div#sidebar div.specs ul li a:hover{
color: black;
background-color: white;
text-decoration : none;
}
div#sidebar h1{
font-family: arial,helvetica,sans-serif;
font-size : 1em;
margin : 0;
padding : 0;
color: #ffffff;
}
div#sidebar h2 {
font-family: arial,helvetica,sans-serif;
font-size: .9em;
margin: 0;
padding: 0:
color: black;
}

HTML:

<div id="sidebar">
<div class="specs">
<h1 align="center" style="border-style: double; border-color: #ffffff;">
Words
</h1>
<dl>
<dd>
Words
</dd>
<dd>
Words
</dd>
<dd>
Words
</dd>
<dd>
Words
</dd>
</dl>

<p align="center">
Words
</p>

</div>

<div class="specs">
<h1 align="center">
Words
</h1>
<ul>
<li>
<a href=" ">Link</a>
</li>
<li>
<a href=" ">Link</a>
</li>
<li>
<a href=" ">Link</a>
</li>
<li>
<a href=" ">Link</a>
</li>
<li>
<a href=" ">Link</a>
</li>
</ul>

</div>
<div class="specs"><h1>&nbsp;</h1>
<ul>
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href=" ">Link</a>
</li>
<li>
<a href=" ">Link</a>
</li>
<li>
<a href=" ">Link</a>
</li>
<li>
<a href=" ">Link</a>
</li>
<li>
<a href=" ">Link</a>
</li>
</ul>

</div>

Thanks alot
Renee

[iamlost]

<edit>Sorry :-(
Welcome to WebmasterWorld, renvac!
</edit>

I am not certain of the exact cause but the lines are a bleed through of the div#sidebar div.specs {background-color : #000;}. Change the colour and you will see the line colour change also. The quick solution is to add background-color: #fff; to the div#sidebar div.specs ul{.

Note that the line-height: 140%; in both has something to do with it as changing the percentage changes (and even removes) the line location.

Hope this gives you somewhere to start.

[renvac]

Thank you for the Welcome and the reply, Iamlost! Removing the 140% only made print larger and moved line up one! But I added background-color: white where you said and voila the line is gone! It's alright by me if it is white - as long as you cant see it!
Now all I need is to get the wording in the boxes to indent some in Netscape and Mozilla?

Thanks again for your help!
Renee

[iamlost]

To "indent" your <li> text you can use padding. For example:
add padding: 0 0 0 3px; to div#sidebar div.specs ul{.

Remove the list-style-position: inside; and I think you will see IE and Moz, etc. looking similar.

Fun isn't it? :-)

[renvac]

Thanks again Iamlost - you dont seem very lost anymore! That worked great!
Thanks alot
Renee