CODEWITHSUNDEEP
javascriptjquerycss
Youss
Youss

Reputation: 4212

Padding right for img only

I have a script which allows to display favicon based on the url over here: JsBin

I have set a padding right for img in the css. Th problem is that the second url(nu.nl) is also getting the css padding right while there is no favicon img. How can I set the css or change the script so that my img styling would only effect the img and not the other urls?

Upvotes: 0

Views: 308

Answers (5)

ianbailey
ianbailey

Reputation: 630

Perhaps use jQuery to handle the broken images after it's already created them? Extra overheads, but works okay.

$("img").error(function(){ $(this).attr('style','padding: 0px;'); });

Upvotes: 0

hkulekci
hkulekci

Reputation: 1942

i think you can set width to imgs like this. And you can use margin for the image.

img {margin-right: 10px;width:16px;height:16px;}

if there is no image, there will be a blank square.

Edit:

if there is no image, the image will not be displayed with jsvascirpt. i am added the following lines :

extImg.onerror = function(){
    faviconIMG.css({'display':'none'});
    console.log("error --------------");
};

http://jsbin.com/udukut/9/edit

Upvotes: 3

Jack
Jack

Reputation: 1472

You have to make some class or ID to target certain images only, because right now padding right is applied on all image tag.

.Myimages(images which have padding-right)
{
  padding-right:10px;
}

Now use this class everywhere you want, for padding-right:10px

I am not sure but this could work please check

 var faviconIMG    = jQuery('<img src="' + '" alt="" class="Myimages"/>')[config.insert](link);

Right now its applying in all image tags because you have applied padding right on img which will effect all the tags having img.

Upvotes: 3

Marat Tanalin
Marat Tanalin

Reputation: 14123

Insert IMG element into link on load event for the image instead of inserting IMG element into all links regardless of whether favicon is actually loaded.

Upvotes: 0

PaulKoeck
PaulKoeck

Reputation: 134

You could give the image a class

<style>
   .foo {padding-right: 10px}
</style>

<img src="/link/to/img.jpg" class="foo" />

Upvotes: 1

Related Questions