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

Ok i created a fiddle. http://jsfiddle.net/57T8S/ IS this what you see? — AnaMaria, Jul 31 '13 at 06:05
@AnaMariaThat's the logo I see in the top left hand corner. It is a black logo so that logo there shows up in the top left hand corner and then because the logo is black there is a white border on the inside of the red border — chriswiec, Jul 31 '13 at 06:07
@chrisw.iec - Dont make us imagine your issue. Provide a screenshot with what you want and what is happening right now. — Nitesh, Jul 31 '13 at 06:08
@chrisw.iec your beating me all black & blue. can you take some time and describe your problem a bit better — AnaMaria, Jul 31 '13 at 06:09
@chrisw.iec, you need to add more code. Unless we understand your issue perfectly, we cant give a perfect solution — AnaMaria, Jul 31 '13 at 06:14
@AnaMaria Sorry for beating you black and blue, but I thought I had the logo you see in the jsfiddle is not the logo I want loaded what you see in the fiddle is a logo that is on top of the image I want loaded it is in the upper left hand corner and and there is a white border on the inside of the 10px red ridge border that should not be there. — chriswiec, Jul 31 '13 at 06:16
@anamaria That just changed the size in fiddle I think it has something to do with the tag, but if I use div the alignment of thre tables goes wacky thanks though. — chriswiec, Jul 31 '13 at 06:25
Is this what you are looking for? http://jsfiddle.net/8F8RT/ - @chrisw.iec — Nitesh, Jul 31 '13 at 06:35

Aayushi Jain · Accepted Answer · 2013-07-31T06:41:44.957

2

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

edited Jul 31 '13 at 06:41

answered Jul 31 '13 at 06:14

Aayushi Jain

2,861
2
29
36

Thanks for the appreciation! :) – Aayushi Jain Jul 31 '13 at 06:17
well that changes the size in the fiddle wasn't a problem in IE 10, but the logo that comes up in fiddle is still superimposed over my original image in the top left hand corner and there is a white border on the inside of the red border. I think the img tag is the issue. – chriswiec Jul 31 '13 at 06:22
`` That is an obvious HTML Solution. OP wants it by CSS. – Nitesh Jul 31 '13 at 06:32
what is that white thing in the upper left hand corner? Can't you see it? – chriswiec Jul 31 '13 at 07:18
@AayusjiJain I removed the end tag and it worked thanks! – chriswiec Jul 31 '13 at 07:22

score 1 · Answer 2 · answered Jul 31 '13 at 06:16

1

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.

answered Jul 31 '13 at 06:16

Vladislav Stanic

795
8
13

He did specify an image (on the background). – Louis van Tonder Jul 31 '13 at 06:20
using image scr works that's what I had before changing to css I was just trying to get rid of as much info in html and adding it all to css. thanks your answer is correct – chriswiec Jul 31 '13 at 06:27
1

http://stackoverflow.com/questions/5775469/whats-the-valid-way-to-include-an-image-with-no-src Using img src in html and background-image in css are 2 different things, so I'm sticking with my previous answer. – Vladislav Stanic Jul 31 '13 at 06:29

Weird White Image Border W/logo

2 Answers2