Question

When viewing my page with IE, I get these unknown CSS elements for images that I cannot seem to remove. The odd 3d style image inset type thing. I do not have this problem in Chrome. This issue is not site breaking, but I would like resolve this.

http://www.cashgrainbids.com/ie_issue.png http://www.cashgrainbids.com/ie_issue.png

HTML

 <img src="" id="areaMappingToggle" class="toggleImageClose" alt=""/>

CSS

 .toggleImageOpen
    {
    float: right;
    margin: 0px;
    width: 12px;
    height: 12px;
    display: inline;
    background: url(../Images/Basis/arrow_open.png) no-repeat;
    background-position: 0 0;
    overflow: hidden;
    }

    .toggleImageOpen:hover
    {
    background-position: 0px -12px;
    cursor: pointer;
    }

    .toggleImageClose
    {
    float: right;
    margin: 0px;
    width: 12px;
    height: 12px;
    display: inline;
    background: url(../Images/Basis/arrow_close.png) no-repeat;
    background-position: 0 0;
    overflow: hidden;
    }

    .toggleImageClose:hover
    {
    background-position: 0px -12px;
    cursor: pointer;
    }

I have tried every CSS change i can think of and searched online for the issue, but cannot find anything similar. Any help would be great, thanks.

Answer 1

IE displays this border when it can’t load an image. Remove the background image from your style and put the path in the src attribute of the img element or change the img element to a <div> or <span>