Do two separate selectors like this

a[href^=”http://”]{
background: url(images/external_link.png) no-repeat 100% 3px;
padding: 0 12px 0 0;
}

a[href*=”yourdomain.com”]{
background: url();
}

The second selector will overide the first one if it is within your domain and won’t show the image. It works in ie for me.

The best way I think that would be to enclose the images in a div or span and then set the property background to none. Something along the lines of the example below.

<span class="img_no_bg"><a href="#"><img src="image.png" alt="image" /></a></span>

span.img_no_bg a {
background:none
}

Is there a way to handle this with CSS? I haven’t been able to come up with a solution.

http://noteslog.com/post/chili-enzymes/

And then I’ve styled it with CSS to make it look a bit better. You can do something like:

pre.chili-all {
background-color: grey;
border:4px solid black;
}

In this case this would add a 4px black border and a grey background to create the box.

And to make it even better you can add a different background colour on mouse hover (not supported on IE because it’s a pseudo-class, IE simply ignores this rule):

pre.chili-all:hover {
background: darkgrey;
}

I hope this helps!

What plugin are you using to show your code in those boxes?

MInTheGap’s last blog post..Upgrade Your Blog