HTML - 表中的额外空间... debug

时间:2010-08-26 13:44:31

标签: html css

看看这张图片

alt text

看到白色低于灰色... 它不应该在那里找到我治愈

<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>

以下是此

的CSS
/* 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 */

这是一个CSS菜单,我用一个名为 CSS菜单生成器的工具生成...我发布了完整的CSS和HTML请解决

注意:解决方案不得删除您在上图中看到的菜单格式

2 个答案:

答案 0 :(得分:1)

首先,插入结束</li>

其次,IE尤其存在“隐藏”空白区域的问题;所以把东西放在一行,看看是否能解决问题,然后根据需要重新标记:

<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>

答案 1 :(得分:0)

很难说出用Firebug检查内容的能力,但查看和发送的代码:

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

此规则在底部应用1em边距,将其更改为:margin:0,您应该没问题。

下次而不是添加您的答案以及有关您的问题的更多信息,只需修改您的问题。这不是一个论坛!