Weird White Image Border W/logo - html

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"> Symbol </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"> Deactivated Tanks </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""> Symbol </div></th>
</tr>
<tr>
<td class="tdtext">Not Scheduled</td>
<td class="ntscheduled"></td>
</tr>
<tr>
<td class="tdtext"> Deactivated Tanks </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.