IE & padding, or margins, or spacing, or whatever is going on Options

[Nadiyya]

I feel like I'm gonna be the noob who bugs everyone. =(
It's just about perfect, except for a huge problem with a list. I thought I did everything right, but in IE, my charity list has 14 pixels of space below every list item. I don't even know where the 14 pixels is coming from. It's just magically there.

Firefox (and every other worthwhile browser):

click to enlarge

IE:

click to enlarge

The code for my list:

CODE

.interestsAndDetails p {
border-left:10px solid rgb(102,0,51);
border-right:10px solid rgb(25,25,25);
font:normal 14px/14px georgia, times, serif;
margin:0;
padding:20px 4px 2px 4px;
}
.interestsAndDetails p.first {
padding:2px 4px;
}
.interestsAndDetails ul {
list-style:none;
margin:0;
padding:0;
text-align:left;
}
.interestsAndDetails ul li {
margin:0;
padding:0;
}
.interestsAndDetails ul li a {
border-left:10px solid rgb(102,0,51);
border-right:10px solid rgb(25,25,25);
display:block;
padding:2px 15px;
text-decoration:none;
text-transform:lowercase;
}
.interestsAndDetails ul li a:hover {
background:rgb(57,57,57);
border-left:10px solid rgb(136,0,68);
border-right:10px solid rgb(41,41,41);
text-decoration:none;
}
.interestsAndDetails div {
background:none;
left:-4px;
position:relative;
text-align:center;
width:322px;
}

CODE

<div>
<h4>Charities</h4>
<p class="first">Education:</p>
<ul>
<li><a href="http://www.americansforthearts.org">Americans for the Arts</a></li>
<li><a href="http://www.worldvisionusprograms.org">World Vision</a></li>
</ul>
<p>Health:</p>
<ul>
<li><a href="http://www.cancer.org">American Cancer Society</a></li>
<li><a href="http://www.diabetes.org">American Diabetes Association</a></li>
<li><a href="http://www.americanheart.org">American Heart Association</a></li>
<li><a href="http://www.redcross.org">American Red Cross</a></li>
</ul>
<p>Disaster Relief:</p>
<ul>
<li><a href="http://www.unitedway.org">United Way</a></li>
</ul>
<p>Environment:</p>
<ul>
<li><a href="http://www.earthshare.org">Earth Share</a></li>
</ul>
</div>

Thank you again =)
Tell me if I ask too many questions, too. I always end up bugging people.

[Mickey]

Put this somewhere between your style tags:

CODE

ul, li {line-height:0px;}

And replace your General codes with this:

CODE

<div>
<h4>Charities</h4>
<p class="first">Education:</p>
<ul>
<li><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3LmFtZXJpY2Fuc2ZvcnRoZWFydHMub3Jn">Americans for the Arts</a>
<a href="http://www.msplinks.com/MDFodHRwOi8vd3d3LndvcmxkdmlzaW9udXNwcm9ncmFtcy5vcmc=">World Vision</a></li>
</ul>

<p>Health:</p>
<ul>
<li><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3LmNhbmNlci5vcmc=">American Cancer Society</a>
<a href="http://www.msplinks.com/MDFodHRwOi8vd3d3LmRpYWJldGVzLm9yZw==">American Diabetes Association</a>
<a href="http://www.msplinks.com/MDFodHRwOi8vd3d3LmFtZXJpY2FuaGVhcnQub3Jn">American Heart Association</a>
<a href="http://www.msplinks.com/MDFodHRwOi8vd3d3LnJlZGNyb3NzLm9yZw==">American Red Cross</a></li>
</ul>
<p>Disaster Relief:</p>

<ul>
<li><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3LnVuaXRlZHdheS5vcmc=">United Way</a></li>
</ul>
<p>Environment:</p>
<ul>
<li><a href="http://www.msplinks.com/MDFodHRwOi8vd3d3LmVhcnRoc2hhcmUub3Jn">Earth Share</a></li>
</ul>
</div>

Try that out. The lines may sometimes get cut off when you scroll through the page, but that's just IE being IE. Other than that, it should work fine.