views:

93

answers:

2

I have a small problem with rendering a img tag with an associated with a class. I've recreated the issue with a simple html page.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test for image problem</title>
</head>
<body>
<style> 
.image  {
    float: left;
    cursor: pointer;
    height:15px;
    width:15px;
}
</style>
    <p>This is a test </p>
    <img class="image" id="image">
</body>
</html>

Anybody knows how to have the same behavior accross all browser ?

+1  A: 

It's a broken image, as you specify no src. Point the src somewhere and the border goes away.

Browser rendering of broken images vary greatly cross-browser and depending on whether you include an alt attribute (which you always should). A 1px inner-border is commonly drawn in broken images in more than just Webkit. You should not deliberately include a broken or srcless image in your document. If you don't want a src, it shouldn't be an <img>.

bobince
A: 

Possible duplicate.

Take a look at this : http://stackoverflow.com/questions/1073015/how-do-i-remove-the-gray-border-that-surrounds-background-images

Use a "div" instead of a "img".

elblanco