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.

[Nadiyya]

Changing the line height works! Thank you.
I didn't change the structure of it though, because each one is a different list item. It still works the way I had it.

And about !important, it's only to override a different property. So as long as you do everything right, then you shouldn't need !important at all. CSS reads top to bottom, so if you had something like b { font-size:10px; } and b { font-size:20px; } then bold text would be 20px. But if you did b { font-size:10px!importnat; } and b { font-size:20px; } bold text would be 10px.

Thank you very much again, Kevin & Anarchy. =)