removing img border

I have a problem with the img border. I am using the following code for all my images, but the border is not going away. Can someone tell me the correct way to remove the img border?

   <div class="mosaic-overlay">

   <img class="cover1"></div>



   .cover1  {width:300px;height:185px;

            float:left;background: url('/img/cover.jpg') 0px 0px; 

            border:0;}

Many thanks.

Erik

edited Jun 27 '11 at 19:38

skaffman

340k85736723

asked Jun 27 '11 at 19:37

Erik

2,6472357102

2

this might be a silly question, but why are you using an img tag with a background image instead of a source? If you used a div tag you wouldn't have the border issue is all

– lnrbob
Jun 27 '11 at 19:44

make sure you close the img tag with />

– joakimdahlstrom
Jun 27 '11 at 20:13

@joakim: Closing the img tag is unnecessary (even forbidden) in HTML 4, and in fact can cause rendering issues in older browsers. Only close img tags if you're writing XHTML...and frankly, you shouldn't be writing XHTML either -- it usually ends up as tag soup, because hardly anyone actually gets it right.

– cHao
Jun 27 '11 at 23:29

add a comment |

I have a problem with the img border. I am using the following code for all my images, but the border is not going away. Can someone tell me the correct way to remove the img border?

   <div class="mosaic-overlay">

   <img class="cover1"></div>



   .cover1  {width:300px;height:185px;

            float:left;background: url('/img/cover.jpg') 0px 0px; 

            border:0;}

Many thanks.

Erik

edited Jun 27 '11 at 19:38

skaffman

340k85736723

asked Jun 27 '11 at 19:37

Erik

2,6472357102

2

this might be a silly question, but why are you using an img tag with a background image instead of a source? If you used a div tag you wouldn't have the border issue is all

– lnrbob
Jun 27 '11 at 19:44

make sure you close the img tag with />

– joakimdahlstrom
Jun 27 '11 at 20:13

@joakim: Closing the img tag is unnecessary (even forbidden) in HTML 4, and in fact can cause rendering issues in older browsers. Only close img tags if you're writing XHTML...and frankly, you shouldn't be writing XHTML either -- it usually ends up as tag soup, because hardly anyone actually gets it right.

– cHao
Jun 27 '11 at 23:29

add a comment |

I have a problem with the img border. I am using the following code for all my images, but the border is not going away. Can someone tell me the correct way to remove the img border?

   <div class="mosaic-overlay">

   <img class="cover1"></div>



   .cover1  {width:300px;height:185px;

            float:left;background: url('/img/cover.jpg') 0px 0px; 

            border:0;}

Many thanks.

Erik

edited Jun 27 '11 at 19:38

skaffman

340k85736723

asked Jun 27 '11 at 19:37

Erik

2,6472357102

I have a problem with the img border. I am using the following code for all my images, but the border is not going away. Can someone tell me the correct way to remove the img border?

   <div class="mosaic-overlay">

   <img class="cover1"></div>



   .cover1  {width:300px;height:185px;

            float:left;background: url('/img/cover.jpg') 0px 0px; 

            border:0;}

Many thanks.

Erik

css

edited Jun 27 '11 at 19:38

skaffman

340k85736723

asked Jun 27 '11 at 19:37

Erik

2,6472357102

edited Jun 27 '11 at 19:38

skaffman

340k85736723

asked Jun 27 '11 at 19:37

Erik

2,6472357102

edited Jun 27 '11 at 19:38

skaffman

340k85736723

edited Jun 27 '11 at 19:38

skaffman

340k85736723

edited Jun 27 '11 at 19:38

skaffman

340k85736723

asked Jun 27 '11 at 19:37

Erik

2,6472357102

asked Jun 27 '11 at 19:37

Erik

2,6472357102

asked Jun 27 '11 at 19:37

Erik

2,6472357102

2

this might be a silly question, but why are you using an img tag with a background image instead of a source? If you used a div tag you wouldn't have the border issue is all

– lnrbob
Jun 27 '11 at 19:44

make sure you close the img tag with />

– joakimdahlstrom
Jun 27 '11 at 20:13

@joakim: Closing the img tag is unnecessary (even forbidden) in HTML 4, and in fact can cause rendering issues in older browsers. Only close img tags if you're writing XHTML...and frankly, you shouldn't be writing XHTML either -- it usually ends up as tag soup, because hardly anyone actually gets it right.

– cHao
Jun 27 '11 at 23:29

add a comment |

2

this might be a silly question, but why are you using an img tag with a background image instead of a source? If you used a div tag you wouldn't have the border issue is all

– lnrbob
Jun 27 '11 at 19:44

make sure you close the img tag with />

– joakimdahlstrom
Jun 27 '11 at 20:13

@joakim: Closing the img tag is unnecessary (even forbidden) in HTML 4, and in fact can cause rendering issues in older browsers. Only close img tags if you're writing XHTML...and frankly, you shouldn't be writing XHTML either -- it usually ends up as tag soup, because hardly anyone actually gets it right.

– cHao
Jun 27 '11 at 23:29

this might be a silly question, but why are you using an img tag with a background image instead of a source? If you used a div tag you wouldn't have the border issue is all

– lnrbob
Jun 27 '11 at 19:44

make sure you close the img tag with />

– joakimdahlstrom
Jun 27 '11 at 20:13

@joakim: Closing the img tag is unnecessary (even forbidden) in HTML 4, and in fact can cause rendering issues in older browsers. Only close img tags if you're writing XHTML...and frankly, you shouldn't be writing XHTML either -- it usually ends up as tag soup, because hardly anyone actually gets it right.

– cHao
Jun 27 '11 at 23:29

add a comment |

4 Answers
4

active

oldest

votes

It's the default "special" border that appears in some browsers when an img element has no src attribute, or a src attribute pointing to an image that does not exist.

For example, look at this in IE9: http://jsfiddle.net/SdbNE/

A common workaround is to set the src to a blank.gif file:

<img class="cover1" src="blank.gif" />

Or, just use a div instead?

<div class="cover1"></div>

answered Jun 27 '11 at 20:12

thirtydot

186k38335316

add a comment |

Set your <img> source to transparent.

#img {

  width:150px;

  height:auto;

  background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRvF4WdZJSA4MkWJXClae4eCvSdk87c5Ok63fgxBxVyR6aHB2Ju_A) no-repeat center;

  background-size: cover;

}

<img id="img" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA" />

Notice the img src is blank and has no border but CSS sets the background: url()

transparent src: data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA

Credit CSS Tricks

edited Jan 6 '16 at 20:38

answered Jul 14 '15 at 23:05

neaumusic

4,99122648

add a comment |

it's the border of alt text, try

img {

  text-indent: -999px;

}

answered Sep 22 '15 at 11:40

whatif

491

add a comment |

I use that java script trick, I initialise all images sources with a blank image.

onload=

var myImagesList =

document.getElementById("element where the images are").getElementsByTagName("img");



for (i=1;i < myImagesList.length-1;i++)

{

myImagesList[i].src = ".../blank image";

}

edited Jan 19 at 13:36

Harsh Patel

1,69111229

answered Jan 19 at 13:07

Adel Ben ahmed

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f6497992%2fremoving-img-border%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

4 Answers
4

active

oldest

votes

4 Answers
4

active

oldest

votes

It's the default "special" border that appears in some browsers when an img element has no src attribute, or a src attribute pointing to an image that does not exist.

For example, look at this in IE9: http://jsfiddle.net/SdbNE/

A common workaround is to set the src to a blank.gif file:

<img class="cover1" src="blank.gif" />

Or, just use a div instead?

<div class="cover1"></div>

answered Jun 27 '11 at 20:12

thirtydot

186k38335316

add a comment |

It's the default "special" border that appears in some browsers when an img element has no src attribute, or a src attribute pointing to an image that does not exist.

For example, look at this in IE9: http://jsfiddle.net/SdbNE/

A common workaround is to set the src to a blank.gif file:

<img class="cover1" src="blank.gif" />

Or, just use a div instead?

<div class="cover1"></div>

answered Jun 27 '11 at 20:12

thirtydot

186k38335316

add a comment |

It's the default "special" border that appears in some browsers when an img element has no src attribute, or a src attribute pointing to an image that does not exist.

For example, look at this in IE9: http://jsfiddle.net/SdbNE/

A common workaround is to set the src to a blank.gif file:

<img class="cover1" src="blank.gif" />

Or, just use a div instead?

<div class="cover1"></div>

answered Jun 27 '11 at 20:12

thirtydot

186k38335316

It's the default "special" border that appears in some browsers when an img element has no src attribute, or a src attribute pointing to an image that does not exist.

For example, look at this in IE9: http://jsfiddle.net/SdbNE/

A common workaround is to set the src to a blank.gif file:

<img class="cover1" src="blank.gif" />

Or, just use a div instead?

<div class="cover1"></div>

answered Jun 27 '11 at 20:12

thirtydot

186k38335316

answered Jun 27 '11 at 20:12

thirtydot

186k38335316

answered Jun 27 '11 at 20:12

thirtydot

186k38335316

answered Jun 27 '11 at 20:12

thirtydot

186k38335316

add a comment |

Set your <img> source to transparent.

#img {

  width:150px;

  height:auto;

  background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRvF4WdZJSA4MkWJXClae4eCvSdk87c5Ok63fgxBxVyR6aHB2Ju_A) no-repeat center;

  background-size: cover;

}

<img id="img" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA" />

Notice the img src is blank and has no border but CSS sets the background: url()

transparent src: data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA

Credit CSS Tricks

edited Jan 6 '16 at 20:38

answered Jul 14 '15 at 23:05

neaumusic

4,99122648

add a comment |

Set your <img> source to transparent.

#img {

  width:150px;

  height:auto;

  background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRvF4WdZJSA4MkWJXClae4eCvSdk87c5Ok63fgxBxVyR6aHB2Ju_A) no-repeat center;

  background-size: cover;

}

<img id="img" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA" />

Notice the img src is blank and has no border but CSS sets the background: url()

transparent src: data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA

Credit CSS Tricks

edited Jan 6 '16 at 20:38

answered Jul 14 '15 at 23:05

neaumusic

4,99122648

add a comment |

Set your <img> source to transparent.

#img {

  width:150px;

  height:auto;

  background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRvF4WdZJSA4MkWJXClae4eCvSdk87c5Ok63fgxBxVyR6aHB2Ju_A) no-repeat center;

  background-size: cover;

}

<img id="img" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA" />

Notice the img src is blank and has no border but CSS sets the background: url()

transparent src: data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA

Credit CSS Tricks

edited Jan 6 '16 at 20:38

answered Jul 14 '15 at 23:05

neaumusic

4,99122648

Set your <img> source to transparent.

#img {

  width:150px;

  height:auto;

  background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRvF4WdZJSA4MkWJXClae4eCvSdk87c5Ok63fgxBxVyR6aHB2Ju_A) no-repeat center;

  background-size: cover;

}

<img id="img" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA" />

Notice the img src is blank and has no border but CSS sets the background: url()

transparent src: data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA

Credit CSS Tricks

#img {

  width:150px;

  height:auto;

  background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRvF4WdZJSA4MkWJXClae4eCvSdk87c5Ok63fgxBxVyR6aHB2Ju_A) no-repeat center;

  background-size: cover;

}

<img id="img" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA" />

#img {

  width:150px;

  height:auto;

  background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRvF4WdZJSA4MkWJXClae4eCvSdk87c5Ok63fgxBxVyR6aHB2Ju_A) no-repeat center;

  background-size: cover;

}

<img id="img" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA" />

edited Jan 6 '16 at 20:38

answered Jul 14 '15 at 23:05

neaumusic

4,99122648

edited Jan 6 '16 at 20:38

answered Jul 14 '15 at 23:05

neaumusic

4,99122648

answered Jul 14 '15 at 23:05

neaumusic

4,99122648

answered Jul 14 '15 at 23:05

neaumusic

4,99122648

add a comment |

it's the border of alt text, try

img {

  text-indent: -999px;

}

answered Sep 22 '15 at 11:40

whatif

491

add a comment |

it's the border of alt text, try

img {

  text-indent: -999px;

}

answered Sep 22 '15 at 11:40

whatif

491

add a comment |

it's the border of alt text, try

img {

  text-indent: -999px;

}

answered Sep 22 '15 at 11:40

whatif

491

it's the border of alt text, try

img {

  text-indent: -999px;

}

img {

  text-indent: -999px;

}

img {

  text-indent: -999px;

}

answered Sep 22 '15 at 11:40

whatif

491

answered Sep 22 '15 at 11:40

whatif

491

answered Sep 22 '15 at 11:40

whatif

491

answered Sep 22 '15 at 11:40

whatif

491

add a comment |

I use that java script trick, I initialise all images sources with a blank image.

onload=

var myImagesList =

document.getElementById("element where the images are").getElementsByTagName("img");



for (i=1;i < myImagesList.length-1;i++)

{

myImagesList[i].src = ".../blank image";

}

edited Jan 19 at 13:36

Harsh Patel

1,69111229

answered Jan 19 at 13:07

Adel Ben ahmed

add a comment |

I use that java script trick, I initialise all images sources with a blank image.

onload=

var myImagesList =

document.getElementById("element where the images are").getElementsByTagName("img");



for (i=1;i < myImagesList.length-1;i++)

{

myImagesList[i].src = ".../blank image";

}

edited Jan 19 at 13:36

Harsh Patel

1,69111229

answered Jan 19 at 13:07

Adel Ben ahmed

add a comment |

I use that java script trick, I initialise all images sources with a blank image.

onload=

var myImagesList =

document.getElementById("element where the images are").getElementsByTagName("img");



for (i=1;i < myImagesList.length-1;i++)

{

myImagesList[i].src = ".../blank image";

}

edited Jan 19 at 13:36

Harsh Patel

1,69111229

answered Jan 19 at 13:07

Adel Ben ahmed

I use that java script trick, I initialise all images sources with a blank image.

onload=

var myImagesList =

document.getElementById("element where the images are").getElementsByTagName("img");



for (i=1;i < myImagesList.length-1;i++)

{

myImagesList[i].src = ".../blank image";

}

edited Jan 19 at 13:36

Harsh Patel

1,69111229

answered Jan 19 at 13:07

Adel Ben ahmed

edited Jan 19 at 13:36

Harsh Patel

1,69111229

edited Jan 19 at 13:36

Harsh Patel

1,69111229

edited Jan 19 at 13:36

Harsh Patel

1,69111229

answered Jan 19 at 13:07

Adel Ben ahmed

answered Jan 19 at 13:07

Adel Ben ahmed

answered Jan 19 at 13:07

Adel Ben ahmed

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Brtdku