html - Weird White Image Border W/logo -

i trying load image using css styling , have red ridge border around it, reason when use css instead of html odd small white border on inside of red ridge border white logo in top left hand corner little logo tiny monitor don't know how else describe it. know going on? have other images loaded same way no problem.

here css script

        html              <table class="toptableleft">         <tr class="toptableleft">           <th class="thtoptableleft1"><div class="tblheadr">&nbsp;&nbsp;symbol&nbsp;&nbsp;</div></th>                       <th class="thtoptableleft2"><div class="tblheadr2">meaning</div></th>     </tr>         <tr>        <td class="ntscheduled"></td>            <td class="tdtext">not scheduled</td>         </tr>         <tr>       <td class="astris"></td>           <td class="tdtext">&nbsp;&nbsp;deactivated tanks&nbsp;&nbsp;</td>         </tr>         <tr>       <td class="bltest"></td>       <td class="tdtext">test scheduled</td>         </tr>         <tr>        <td class="grntest"></td>           <td class="tdtext">test in process</td>         </tr>         <tr>        <td class="rdtest"></td>           <td class="tdtext">test late</td>         </tr>    </table> <div id="pic" align="center" style="float:left;">   <img class="logo"/> </div> <div id="toptable2" align="center" style="float:none;">    <table class="toptableright">         <tr class="toptableright">           <th class="thtoptableright1"><div class="tblheadr2">meaning<div/></th>           <th class="thtoptableright2"><div class="tblheadr"">&nbsp;&nbsp;symbol&nbsp;&nbsp;</div></th>         </tr>         <tr>        <td class="tdtext">not scheduled</td>           <td class="ntscheduled"></td>         </tr>         <tr>       <td class="tdtext">&nbsp;&nbsp;deactivated tanks&nbsp;&nbsp;</td>       <td class="astris"></td>         </tr>     <tr>       <td class="tdtext">test scheduled</td>           <td class="bltest"></td>         </tr>         <tr>       <td class="tdtext">test in process</td>           <td class="grntest"></td>         </tr>         <tr>       <td class="tdtext">test late</td>           <td class="rdtest"></td>         </tr>   </table>                css         table.toptableleft{     float:left; border:5px; border-style:outset; border-color:#ffff00;      height:20px; width:23%; border-spacing:0; border-collapes:collapse; }      table.toptableright{     float:right;border:5px; border-style:outset;border-color:#e80000; height:20px;      width:23%; border-spacing:0; border-collapes:collapse; vertical-align:top; }      tr.toptableleft{     background-color:#595959;color:ffff00; }      tr.toptableright{     background-color:#595959;color:ffff00; }      th.thtoptableleft1{     border:1px solid #ffff00;font-size:12px; width:45;height:20; }      th.thtoptableleft2{     border:1px solid #ffff00;font-size:12px; width:125;height:20; }      th.thtoptableright1{     border:1px solid #ffff00;font-size:12px; width:125;height:20; }      th.thtoptableright2{     border:1px solid #ffff00;font-size:12px; width:45;height:20; }      div.tblheadr{     text-align:center; margin-bottom:-1px; }      div.tblheadr2{     text-align:center; margin-bottom:-1px; }              td.tdtext{             background-color:#000000; color:#ffff00; border:1px solid #ffff00;              font-family:'arial'; font-size:12px; text-align:center; font-weight:bold;     }      td.ntscheduled{     background-color:#000000;color:ffff00; border:1px solid #ffff00;     background-image: url(../images/not-scheduled.png); background-size:22px 24px;      width:25; height:24; background-repeat:no-repeat; background-position:center; }      td.astris{     background-color:#000000;color:ffff00; border:1px solid #ffff00;     background-image: url(../images/gray-astris3.png); background-size:22px 24px; width:25;      height:24; background-repeat:no-repeat; background-position:center; }      td.bltest{     background-color:#000000;color:#ffff00; border:1px solid #ffff00;     background-image: url(../images/blue-test.png); background-size:22px 24px; width:25;      height:24; background-repeat:no-repeat; background-position:center; }      td.grntest{     background-color:#000000;color:ffff00; border:1px solid #ffff00;     background-image: url(../images/green-test.png); background-size:22px 24px; width:22;     height:24; background-repeat:no-repeat; background-position:center; }      td.rdtest{     background-color:#000000;color:ffff00; border:1px solid #ffff00;     background-image: url(../images/red-test.png); background-size:22px 24px; width:22;      height:24; background-repeat:no-repeat; background-position:center; }      img.logo{     float:none; margin-left:120px; margin-right:auto; margin-top:17px;      border:10px ridge #e80000; background-image: url(../images/logo.png);      background-size:199px 101px; width:199; height:101; background-repeat:no-repeat;      background-position:center; } 

here soution:

img.logo {       margin-left:120px;       margin-right:auto;       margin-top:17px;       border:10px ridge #e80000;       background-image: url(../images/logo.png);       background-size:199px 101px;       width:199px;       height:101px;       background-repeat:no-repeat;       background-position:center;   } 

check out fiddle: fiddle

width , height must defined in px

edit:

move img tag in div like

 <div id="logo"><img/></div> 

and add css:

#logo{     float:none;      margin-left:120px;      margin-right:auto;      margin-top:17px;      border:10px ridge #e80000;      background-color: blue;      background-image:  url(../images/logo.png);     background-size:199px 101px;     width:199px;     height:101px;     background-repeat:no-repeat;     background-position:center; } 

here working fiddle: fiddle