Newcomer asking for advice on style issues, blank strips between pictures_html/css_WEB-ITnose

This is the target effect.

I stole the style files, stole the pictures, and tested the exact same source code. The results are as follows, I burst into tears.



The page source code of the prompt box is as follows:

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

The related styles are as follows:

/* 提示框样式 */.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;}

The images needed are as follows:

This is message_bg.png


This is message_center_bg.png




Please help me. I will have a meeting to demonstrate tomorrow. I am a .NET developer and I am really a layman on styles. .
It seems that this is related to the HTML standard. Now the master page in the project is unified:



Thank you everyone ~

Reply to the discussion (solution)

You can debug and see which background-position is deviated, followed by the xy coordinates, change it and remove the white bars
If it is for demonstration, just use a picture. , why are there so many splicings? Do you want to display many types of methods?

Set the cellspaceing cellpadding of the table to 0
Maybe you spelled it wrong

Change the border, margin, and spacing of the table are all set to 0, that is:

  .MessageBox{ border-collapse:collapse;}