css - I have a link icon next to each link. How do I exclude the link icon from images? -


i've got following in .css file creating little image next each link on site:

div.post .text a[href^="http:"] {     background: url(../../pics/remote.gif) right top no-repeat;     padding-right: 10px;     white-space: nowrap; } 

how modify snippet (or add new) exclude link icon next images links themselves?

if set background color , have negative right margin on image, image cover external link image.

example:

a[href^="http:"] {    background: url(http://en.wikipedia.org/skins-1.5/monobook/external.png) right center no-repeat;    padding-right: 14px;    white-space: nowrap;  }  a[href^="http:"] img {    margin-right: -14px;    border: medium none;    background-color: red;  }
<a href="http://www.google.ca">google</a>  <br/>  <a href="http://www.google.ca">    <img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/4a/commons-logo.svg/50px-commons-logo.svg.png" />  </a>

edit: if you've got patterned background isn't going great images have transparency. also, href^= selector won't work on ie7 knew already


Comments

Popular posts from this blog

c++ - How do I get a multi line tooltip in MFC -

asp.net - In javascript how to find the height and width -

c# - DataTable to EnumerableRowCollection -