Weird White Image Border W/logo

Question

I am trying to load an image using css styling and I have a red ridge border around it, but for some reason when I use css instead of html I get a odd small white border on the inside of the red ridge border with a white logo in the top left hand corner the little logo could be a tiny monitor I don't know how else to describe it. Does anyone know what is going on? I have other images loaded the same way with no problem.

Here is the 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;
}

Answer 1

Here is your 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 the Fiddle: Fiddle

Width and Height must be defined in px

Edit:

Move your img tag in div like

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

and then add its 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 is the working Fiddle: Fiddle

Answer 2

Your html is the problem. You have image with no source specified, but you put background instead. Browser is trying to read image but can't find source. Use image source and remove background or use span for example and leave background.