HTML - Extra Space in table... debug

Question

look at this image

see the white are below the grey... its not supposed to be there find me a cure

<table border="0" cellpadding="0" cellspacing="0" height="30">
<tr>
    <td>
    <div class="mainmenu">
    <ul>
          <li class="li_nc"><a href="/" target="_self" >HOME</a></li>
          <li class="li_hc"><a href="#"  >PROGRAMS</a><ul class="ul_ch">
             <li class="li_hc"><a href="#"  >Engineering</a><ul class="ul_ch">
                <li class="li_nc"><a href="#"  >BEE ( Electronics 4 Years )</a></li>
                <li class="li_nc"><a href="#"  >BEE ( Tele Comm. 4 Years )</a></li>
                <li class="li_nc"><a href="#"  >BSE ( Software 4 Years )</a></li>
                <li class="li_nc"><a href="#"  >BCE (Computer 4 Years)</a></li>
             </ul></li>
             <li class="li_hc"><a href="#"  >Management Sciences</a><ul class="ul_ch">
                <li class="li_nc"><a href="#"  >BBA ( Years )</a></li>
                <li class="li_nc"><a href="#"  >MBA ( 3 Years )</a></li>
                <li class="li_nc"><a href="#"  >MBA ( 2 1/2 Years )</a></li>
                <li class="li_nc"><a href="#"  >MBA ( 1 1/2 Years )</a></li>
                <li class="li_nc"><a href="#"  >MBA ( Weekend )</a></li>
                <li class="li_nc"><a href="#"  >MBA ( Pharma )</a></li>
                <li class="li_nc"><a href="#"  >Ph.D Management</a></li>
             </ul></li>
             <li class="li_hc"><a href="#"  >Earth & Environmental Sciences</a><ul class="ul_ch">
                <li class="li_nc"><a href="#"  >BS ( Geology\Geophysics )</a></li>
                <li class="li_nc"><a href="#"  >MS  ( Geology\Geophysics )</a></li>
                <li class="li_nc"><a href="#"  >MS ( Environmental Policy & Management )</a></li>
                <li class="li_nc"><a href="#"  >MS & Ph.D ( Environmental )</a></li>
             </ul></li>
             <li class="li_hc"><a href="#"  >Professional Psychology</a><ul class="ul_ch">
                <li class="li_nc"><a href="#"  >BS ( 4 Years )</a></li>
                <li class="li_nc"><a href="#"  >PMD ( 1 Year )</a></li>
                <li class="li_nc"><a href="#"  >M. Phil ( 1-2 Years )</a></li>
                <li class="li_nc"><a href="#"  >Ph.D ( 2-3 Years )</a></li>
             </ul></li>
             <li class="li_hc"><a href="#"  >Marine & Maritime Sciences</a><ul class="ul_ch">
                <li class="li_nc"><a href="#"  >MBA ( 1-5 Years )</a></li>
                <li class="li_nc"><a href="#"  >MBA ( Maritime 2-5 Years )</a></li>
                <li class="li_nc"><a href="#"  >MBA ( Maritime 3 Years )</a></li>
                <li class="li_nc"><a href="#"  >MSC ( Geophysics 2 Years )</a></li>
             </ul></li>
             <li class="li_nc"><a href="#"  >Graduate & Applie Sciences</a></li>
             <li class="li_hc"><a href="#"  >Humanities & Social Sciences</a><ul class="ul_ch">
                <li class="li_nc"><a href="#"  >BSS ( 4 Years )</a></li>
             </ul></li>
             <li class="li_hc"><a href="#"  >Medical & Dental Sciences</a><ul class="ul_ch">
                <li class="li_nc"><a href="#"  >MBBS ( 5 Years )</a></li>
             </ul></li>
             <li class="li_hc"><a href="#"  >Legal Studies</a><ul class="ul_ch">
                <li class="li_nc"><a href="#"  >LLB ( 5 Years )</a></li>
             </ul></li>
          </ul></li>
          <li class="li_hc"><a href="#"  >ADMISSIONS</a><ul class="ul_ch">
             <li class="li_nc"><a href="#"  >General Info</a></li>
             <li class="li_nc"><a href="#"  >Eligibility</a></li>
             <li class="li_nc"><a href="#"  >Admissions Procedure</a></li>
             <li class="li_nc"><a href="#"  >Freshmen Orientation</a></li>
             <li class="li_nc"><a href="#"  >How To Apply ?</a></li>
             <li class="li_nc"><a href="#"  >Prospectus</a></li>
          </ul></li>
          <li class="li_hc"><a href="#"  >ACADEMICS</a><ul class="ul_ch">
             <li class="li_nc"><a href="#"  >Semester System</a></li>
             <li class="li_nc"><a href="#"  >Examination System</a></li>
             <li class="li_nc"><a href="#"  >Course\Syllabus</a></li>
             <li class="li_nc"><a href="#"  >Faculty Evaluation</a></li>
             <li class="li_nc"><a href="#"  >Rules & Regulations</a></li>
             <li class="li_nc"><a href="#"  >Degree Recognition</a></li>
          </ul></li>
          <li class="li_hc"><a href="#"  >FACILITIES</a><ul class="ul_ch">
             <li class="li_nc"><a href="#"  >Student Support Facilities</a></li>
             <li class="li_nc"><a href="#"  >Laboratories</a></li>
             <li class="li_nc"><a href="#"  >Computer Laboratories</a></li>
             <li class="li_nc"><a href="#"  >Audio & Visual Facilities</a></li>
             <li class="li_nc"><a href="#"  >Medical Services</a></li>
             <li class="li_nc"><a href="#"  >Security Services</a></li>
             <li class="li_nc"><a href="#"  >Sports Facilities</a></li>
             <li class="li_nc"><a href="#"  >Study & Excursion Trips</a></li>
             <li class="li_nc"><a href="#"  >Cafeterias & Dinning</a></li>
          </ul></li>
          <li class="li_hc"><a href="#"  >FACULTY</a><ul class="ul_ch">
             <li class="li_nc"><a href="#"  >Islamabad Campus</a></li>
             <li class="li_nc"><a href="#"  >Karachi Campus</a></li>
          </ul></li>
          <li class="li_hc"><a href="#"  >ABOUT</a><ul class="ul_ch">
             <li class="li_nc"><a href="#"  >History</a></li>
             <li class="li_nc"><a href="#"  >Board Of Governers</a></li>
             <li class="li_nc"><a href="#"  >Constituent Units</a></li>
             <li class="li_nc"><a href="#"  >Affiliated Units</a></li>
          </ul></li>
          <li class="li_nc"><a href="#"  >CONTACT US</a></li>
          <li class="li_nc"><a href="#"  >VIRTUAL TOUR</a></li>
    </ul>
    </div>
    </td>
</tr>
</table>

Following is the CSS for this

/* pull-down mainmenu css */
.mainmenu{
    float  : left;
    width  : 100%;
    height : 30;
    padding: 0;

    margin-bottom:0;
    margin-top:0;
    margin-left:0;
    margin-right:0;
    border-width:0;

}
.mainmenu ul {
    float: left;
    width: 100%;
    list-style: none;
    line-height: 1;
    color:#e0e0e0;
    background: #474747;
    padding: 0;
    border: solid transparent;
    border-width: 1px 0;
    margin: 0 0 1em 0;
}

.mainmenu a, .mainmenu a:visited 
{
    display: block;
    font-family:calibri;
    font-size:13px;
    font-weight:normal;
    font-style:normal;
    text-decoration:underline;
    color: #e0e0e0;
    text-decoration: none;
    padding: 1em 1em;
}

.mainmenu ul ul a{
    width:100%;
    height:100%;
}
.mainmenu ul a{
    width:1%;
}


.mainmenu li  {
    float: left;
    margin:0;
    padding:0;
}

.mainmenu ul li 
{
 float:left; position:relative;  
}

.mainmenu ul li a 
{
 white-space:nowrap;
}

.mainmenu li ul {
    position: absolute;
    left: -999em;
    height: auto;
    width:15em; 

    background: #474747;
    font-weight: normal;
    border-width: 1px;
    margin: 0;
}

.mainmenu li li {
    width:15em ;
}

.mainmenu li li a{
    width:13em ;
}

.mainmenu li ul  {
    margin: 0;
}
.mainmenu li ul ul {
    margin: -2.8em 0 0 13.5em;
}
.ul_ch, 
.mainmenu li:hover ul ul,
.mainmenu li li:hover ul ul,
.mainmenu li li li:hover ul ul,
.mainmenu li li li li:hover ul ul,
.mainmenu li li li li li:hover ul ul
{
    left: -999em;
}
.mainmenu li:hover ul,
.mainmenu li li:hover ul,
.mainmenu li li li:hover ul,
.mainmenu li li li li:hover ul,
.mainmenu li li li li li:hover ul
{
    left: auto;
}
.mainmenu li:hover>ul.ul_ch   
{
    left: auto;
}

.mainmenu li:hover{
    background: #0552a7;
}

.mainmenu li:hover a,.mainmenu li:hover a:visited,.mainmenu li:hover a:hover,.mainmenu li a:hover{
    color:#e0e0e0;
}
.mainmenu li:hover li a, .mainmenu li li:hover li a, 
.mainmenu li li li:hover li a, .mainmenu li li li li:hover li a,
.mainmenu li:hover li a:visited, .mainmenu li li:hover li a:visited, 
.mainmenu li li li:hover li a:visited, .mainmenu li li li li:hover li a:visited
{
    color:#e0e0e0;
}
.mainmenu li li:hover, .mainmenu li li li:hover, 
.mainmenu li li li li:hover , .mainmenu li li li li li:hover , .mainmenu li li li li li li:hover 
{
    background: #0552a7;
    z-index:9999;
}
.mainmenu li li:hover a,.mainmenu li li li:hover a, 
.mainmenu li li li li:hover a, .mainmenu li li li li li:hover a
{
    color: #e0e0e0; 
}

.mainmenu ul ul a, .mainmenu ul ul a:visited,
.mainmenu li li a, .mainmenu li li a:visited
{
    color: #e0e0e0;
}
.mainmenu ul ul a:hover,
.mainmenu li:hover li:hover a,.mainmenu li:hover li:hover a:visited ,
.mainmenu li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover a:visited,
.mainmenu li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover a:visited ,
.mainmenu li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover a:visited,
.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a,.mainmenu li:hover li:hover li:hover li:hover li:hover li:hover a:visited{
    color: #e0e0e0;
}
.mainmenu li:hover li:hover li a,.mainmenu li:hover li:hover li a:visited ,
.mainmenu li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li a:visited,
.mainmenu li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li a:visited,
.mainmenu li:hover li:hover li:hover li:hover li:hover li a,.mainmenu li:hover li:hover li:hover li:hover li:hover li a:visited{
    color: #e0e0e0;
}


/* end of mainmenu css */

this is a CSS Menu which i generated from a tool called CSS Menu Generator... i have posted the complete CSS and HTML please solve

NOTE: the solution must not take away the formatting of the menu that you see in the image above

Answer 1

Firstly, insert the closing </li>.

Secondly, IE especially has a problem with "hidden" white space; so put things on one line to see if that solves the problem and then tab again as necessary:

<table border="01" cellpadding="0" cellspacing="0" height="30">
<tr>
    <td>
    <div class="mainmenu">
        <ul><li><!-- A LOT OF HTML CODE HERE--><!-- AFTER A LOT OF HTML CODE HERE--></li></ul>
    </div>
</td>

Answer 2

It is dificult to say what is going on w/o ability to inspect stuff with Firebug, but looking and the code you sent:

.mainmenu ul {
    ..snip..
    margin: 0 0 1em 0;
    ..snip..
}

This rule is applying 1em margin on the bottom, change it to: margin:0 and you should be fine.

PLEASE next time instead of adding your answers with more information about your problem just modify your question. This is not a forum!