新人请问样式有关问题,图片之间的空白条条 _HTML/CSS

新人请教样式问题,图片之间的空白条条

这是目标效果。

我偷了样式文件，偷了图片，一模一样的源代码测试，结果如下，泪奔。

提示框的页面源码如下：

HTML code

<table class="MessageBox" align="center" width="500">
   <tr class="head">
      <td class="left"></td>
      <td class="center">
         <div class="title">提示</div>
      </td>
      <td class="right"></td>
   </tr>
   <tr class="msg">
      <td class="left"></td>
      <td class="center info">
         <div class="msg-content">请选择用户，只能查询您管理范围内的，角色序号在您之后的用户</div>
      </td>
      <td class="right"></td>
   </tr>
   <tr class="foot">
      <td class="left"></td>
      <td class="center"></td>
      <td class="right"></td>
   </tr>
</table>

相关的样式如下：

CSS code

/* 提示框样式 */
.MessageBox{
}
/* 表头 */
.MessageBox .head{
   height:32px;
   overflow:hidden;
}
.MessageBox .head .left{
   width:20px;
   background:url('images/message_bg.png') left 0px no-repeat;
}
.MessageBox .head .center{
   padding:0px;
   background:url('images/message_bg.png') 0px -32px repeat-x;
}
.MessageBox .head .center .title{
   float:left;
   color:#fff;
   font-size:16px;
   font-weight:bold;
   margin-top:5px;
}
.MessageBox .head .right{
   width:20px;
   background:url('images/message_bg.png') right 0px no-repeat;
}

/* 表头 */
.MessageBox .head-no-title{
   height:16px;
}
.MessageBox .head-no-title .left{
   width:20px;
   background:url('images/message_bg.png') left -96px no-repeat;
}
.MessageBox .head-no-title .center{
   background:url('images/message_bg.png') 0px -112px repeat-x;
}
.MessageBox .head-no-title .right{
   width:20px;
   background:url('images/message_bg.png') right -96px no-repeat;
}

/* 按钮栏 */
.MessageBox .control{
   height:40px;
   vertical-align:top;
}
.MessageBox .control .left{
   width:20px;
   background:url('images/message_center_bg.png') left top repeat-y;
}
.MessageBox .control .center{
   background-color:#7bafe6;
   text-align:center;
}
.MessageBox .control .right{
   width:20px;
   background:url('images/message_center_bg.png') right top repeat-y;
}

/* 表底 */
.MessageBox .foot{
   height:16px;
}
.MessageBox .foot .left{
   width:20px;
   background:url('images/message_bg.png') left -64px no-repeat;
}
.MessageBox .foot .center{
   background:url('images/message_bg.png') 0px -80px repeat-x;
}
.MessageBox .foot .right{
   width:20px;
   background:url('images/message_bg.png') right -64px no-repeat;
}

/* 提示框 */
.MessageBox .msg{
   height:90px;
}
.MessageBox .msg .left{
   width:20px;
   background:url('images/message_center_bg.png') left top repeat-y;
}
.MessageBox .msg .center{
   padding-left:90px;
   font-size:16px;
   background-color:#7bafe6;
}
.MessageBox .msg .center .msg-content{
   color:#fff;
   margin:20px 12px 20px 6px;
}
.MessageBox .msg .right{
   width:20px;
   background:url('images/message_center_bg.png') right top repeat-y;
}

.MessageBox .msg .error{
   background-image:url("images/icon64_error.png");
   background-position:0px 10px;
   background-repeat:no-repeat;
}
.MessageBox .msg .info{
   background-image:url("images/icon64_info.png");
   background-position:0px 10px;
   background-repeat:no-repeat;
}
.MessageBox .msg .warning{
   background-image:url("images/icon64_warning.png");
   background-position:0px 10px;
   background-repeat:no-repeat;
}
.MessageBox .msg .forbidden{
   background-image:url("images/icon64_forbidden.png");
   background-position:0px 10px;
   background-repeat:no-repeat;
}
.MessageBox .msg .stop{
   background-image:url("images/icon64_stop.png");
   background-position:0px 10px;
   background-repeat:no-repeat;
}
.MessageBox .msg .blank{
   height:40px;
   padding:10px 20px 10px 20px;
   text-align:center;
}