Question

有人能看出为什么导航标签没有与下面的桌边对齐吗？第一个标签“菜单标签＃1”看起来是位于桌面边框左侧右侧的2个像素。

HTML：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>Code Sample</title>

</head>

<body>

<p>&nbsp;</p>

<table width="960" border="0" align="center"  cellspacing="1" cellpadding="0" >

  <tr>
    <td>

    <div id="flashContent">Place Holder</div>

        </td>
  </tr>


  <tr>

    <th scope="col">


    <!--Navigation Menu-->

<div id="menu" align="left"> 


  <ul id="navigation">
     <li><a href="blank.html"><span>Menu Tab #1</span></a></li>
     <li><a href="blank.html"><span>Menu Tab #2</span></a></li>
     <li><a href="blank.html"><span>Menu Tab #3</span></a></li>
     <li><a href="blank.html"><span>Menu Tab #4</span></a></li>


     <li id="current"><a href="blank.html"><span>Menu Tab #5</span></a>
    <ul> 
        <li><a href="blank.html">Sub Menu Item</a></li>
        <li><a href="blank.html">Sub Menu Item</a></li>
        <li><a href="blank.html">Sub Menu Item</a></li>
        <li><a href="blank.html">Sub Menu Item</a></li>
        <li><a href="blank.html">Sub Menu Item</a></li>
    </ul>
    </li>

    <li><a href="blank.html"><span>Menu Tab #6</span></a>
     <ul>
       <li><a href="blank.html">Sub Menu Item</a></li>
        <li><a href="blank.html">Sub Menu Item</a></li>
        <li><a href="blank.html">Sub Menu Item</a></li>
        <li><a href="blank.html">Sub Menu Item</a></li>
        <li><a href="blank.html">Sub Menu Item</a></li>
    </ul>
    </li>

     <li><a href="blank.html"><span>Menu Tab #7</span></a>
     <ul>
        <li><a href="blank.html">Sub Menu Item</a></li>
        <li><a href="blank.html">Sub Menu Item</a></li>
        <li><a href="blank.html">Sub Menu Item</a></li>
        <li><a href="blank.html">Sub Menu Item</a></li>
        <li><a href="blank.html">Sub Menu Item</a></li>
    </ul>
    </li>


     <li><a href="blank.html"><span>Menu Tab #8</span></a></li>

    </ul>

</div>

        <!--Navigation Menu End-->



    </th>

  </tr>
  <tr>

    <td>



<table width="100%" border="1" cellspacing="15" cellpadding="0">
  <tr>
    <th bgcolor="#0066FF" scope="col"><div id="flashContent">
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>Place Holder</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
      <p>&nbsp;</p>
    </div>

        </th>
  </tr>
</table>




    </td>

  </tr>
</table>


</body>
</html>

CSS：

    @charset "utf-8";
/* CSS Document */

* {
 padding: 0;
 margin: 0;
 }
 body {
 font-size: 80%;
 font-family: arial;
 padding: 10px;
 background: #fff;
  margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
 }


 table td {
     border-collapse:collapse;
}


 #navigation {

 white-space: nowrap;
 overflow: hidden;
 font-size: 93%;

 }
 #navigation li {
 float: left;
 list-style: none;
 }
 #navigation a {
 display: block;
 background-image: url(css-tabs/tabright.gif);
 background-position: top right;
 background-repeat: no-repeat;
 color: #FFFFFF;
 text-decoration: none;
 font-weight: bold;
 }

 #navigation li#current a { 
 display: block;
 background-image: url(css-tabs/tabright_selected.png);
 background-position: top right;
 background-repeat: no-repeat;
 color: #FFFFFF;
 text-decoration: none;
 font-weight: bold;
 } 
 #navigation li#current a:hover { 
 background-position: right -199px;
 color: #FFFFFF;
 } 
 #navigation li#current span {
 display: block;
 background-image: url(css-tabs/tableft_selected.png);
 background-repeat: no-repeat;
 padding: 5px 15px;
 }

 #navigation span {
 display: block;
 background-image: url(css-tabs/tableft.gif);
 background-repeat: no-repeat;
 padding: 5px 15px;
 }
 #navigation a:hover {
 background-position: right -199px;
 color: #FFFFFF;
 }
 #navigation a:hover span {
 background-position: 0 -198px;
 }

 #navigation li ul {
 position: absolute;
 width: 30em;
 left: -999em;
 margin-left: 2px;
 font-size: 90%;
 }

 #navigation li ul a, #navigation li ul a:link {
 background-image: none;
 padding: 0 5px;
 width: 15em;
 background-color: #999999;
 color: #FFFFFF;
  /*opacity for IE5+*/
  filter: alpha(opacity=90);
  /*opacity for older Mozilla browsers*/
  -moz-opacity: 0.9;
  /*opacity for mozilla/safari*/
  opacity: 0.9;
 }
 #navigation li ul a:hover {
 background-color: #99cccc;
 }

 #navigation li:hover ul, #navigation li.sfhover ul {
 left: auto;
 }

#header {
    float: left;
    height: 60px;
    width: 959px;
    background: #fff;

}

#menu {
    float: left;     
    height: 25px;
    width: 100%;
    background: #fff;
    border: 0px solid #cccccc;
}


#indent_content {
    margin-left: 60px;
}


#flashContent { 
width:100%; 
height:100%; 
}

如果重要的话，我正在为IE8开发。提前谢谢。

为什么这些选项卡不会与下面的表格边框对齐

0 个答案: