IE & FF OL & UL Spacing

[Johnnymushio]

The page I will be referring to is japantown.awardspace.com/japantown.shtml

In IE and FF, the tables on the page have a vertical space beneith the text in the tables, only at the bottom, not the top. How can I remove the vertical bottom spaces in the three tables? It has something to do with the OL and UL.

Thanks

[Twey]

At a guess, remove the bottom margin and/or padding from the list and/or its items.

[Johnnymushio]

What, how? Heres the code for one of the tables.


<table width="228" border="5" style="border:5px solid #d1b2ef;border-right-color:#390071;border-bottom-color:#390071;" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="216" align="center"><font color="#CC0000" size="2">What's
open?</font></td>
</tr>
<tr>
<td align="left"><ul>
<li><font size="2"><a href="generalchat.php?frames">General
Chat</a></font></li>
<li><font size="2"><a href="languagechat.php?frames">Language
Chat</a></font></li>
<li><font size="2"><a href="/Board/index.php">Message Board</a></font></li>
<li><font size="2"><a href="interestingfacts.shtml">Interesting
Facts</a></font></li>
<li><font size="2"><a href="emoticons.shtml">Emoticons</a></font></li>
<li><font size="2"><a href="news.shtml">News</a></font></li>
<li><a href="staff.shtml"><font size="2">Staff</font></a></li>
</ul></td>
</tr>
<tr>
<td align="center" valign="top"><font color="#CC0000" size="2">Updates
coming soon!!</font></td>
</tr>
</table>

[jscheuer1]

Add this rule to your style section:


ul, ol {
margin-bottom:0;
}

[Johnnymushio]

I put the code in it worked, but then after I put the code into the other two tables it did not work.

So I took the code out of the other two tables and then the first table didn't even work.

When I say the tables didn't work I mean the bottom spacing was still there.

Here is the style section code of the first table.


style="border:5px solid #d1b2ef;border-right-color:#390071;border-bottom-color:#390071; ul, ol {margin-bottom:0;}"

[jscheuer1]

I didn't mean to use that inline. Your page has two style sections, the second one looks like so:


<style type="text/css">

#dropmenudiv{
position:absolute;
border:1px solid black;
border-bottom-width: 0;
font:normal 13px Times New Roman;
line-height:17px;
z-index:100;
}

#dropmenudiv a, span{
color: black;
width: 159;
display: block;
text-indent: 2px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: none;
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: #3399FF;
color: white;
}

</style>


To be more clear about what I was suggesting, find the above section of your code and make it look like so:


<style type="text/css">

#dropmenudiv{
position:absolute;
border:1px solid black;
border-bottom-width: 0;
font:normal 13px Times New Roman;
line-height:17px;
z-index:100;
}

#dropmenudiv a, span{
color: black;
width: 159;
display: block;
text-indent: 2px;
border-bottom: 1px solid black;
padding: 1px 0;
text-decoration: none;
font-weight: none;
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: #3399FF;
color: white;
}

ul, ol {
margin-bottom:0;
}

</style>


As long as you have no other ul or ol elements on the page that this could cause a problem with, this will be the easiest way to get them all at one shot. I tried this out locally and it seemed fine. If you have to add the style inline, it must be done to each of the ul and ol elements individually, example using a ul:


<ul style="margin-bottom:0;">

Do it one way or the other, in the style section or inline, do not do it in both places and do not do what you did to the table's inline style. That is non-standard and I am surprised that it worked at all.