CODEWITHSUNDEEP
htmlpnginvisible
Stefan
Stefan

Reputation: 14873

Transparent PNG has grey border in Chrome and IE, invisible in FireFox

why does the PNG have a grey border in Google Chrome and IE?

Also, why isn't it visible in FireFox?

Fiddle

HTML

<html>
    <head>
        <title>Inline Border</title>
        <style type="text/css" media="screen">
            .inline-image {
                width: 16px;
                height: 16px;
                background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAfklEQVR42mNgoDZITk4WosiAtLS0M6mpqb1Amp9cAy4B8X8gfpWenp5MiQEwfB6IbSgxAIaXArEcJQaA8Ddg+NQVFhZykmsADG8MDQ1lJseA5wQDFocBP0FRm5WVxUNOGGwEJi4VcmLhKtC5HuSkg8NA5+bjDCRCAG8UDUoAAIw8kVdwMG+3AAAAAElFTkSuQmCC) 0px 0px no-repeat no-repeat;
            }
        </style>
    </head>
    <body>
        <img class="inline-image" />
    </body>
</html>

Upvotes: 1

Views: 3362

Answers (3)

Daniel Ta
Daniel Ta

Reputation: 416

If you want to user background-image, you should use div tag.

Otherwise, If you want to user img tag in this stituation, you should add src attribute with transparent image.

Upvotes: 2

Arpit Srivastava
Arpit Srivastava

Reputation: 2235

Check this jsfiddle:http://fiddle.jshell.net/Nr5tb/7/.I Hope you got your answer from this.

You have an img element that doesn't have a src attribute, but it does have a background-image style applied. I'd say that the gray border is the 'placeholder' for where the image would be, if you'd specified a src attribute. If you don't want a 'foreground' image, then don't use an img tag as I mention in my jsfiddle

Upvotes: 2

Ravichandran Jothi
Ravichandran Jothi

Reputation: 3066

You need add one more style in css

.inline-image {

    display: block;
            }

or you need to change the <img> tag to <div>

Upvotes: -1

Related Questions