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]

It works without it. And plus, isn't !important used for FF? I might be mistaken, though.

[synatribe]

well actually !important is suppose to be used in proper CSS [I just found this out from w3schools, so sometimes browsers reject CSS if it dosent have the !important declaration, but it seems some browsers are more lenient.

http://www.w3.org/TR/CSS21/cascade.html#important-rules
that shows the use of !important :]