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.

[synatribe]

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.

make sure you add

CODE

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

[the !important variable]
after all it is IE :]

[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 :]

[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. =)

[schizo]

Topic closed and moved to resolved.

Let me know if you need this reopened.