I'm using the following CSS to append an offsite glyph to all external links on my site. This works great for text-based links; however, I would like to ommit the glyph when the link surrounds an image. Is it possible to do this via CSS? (this is for a very large site, so I want to do it without assigning a class to the individual links)
#contentcenter a[href^="http://"] {
background: url(/enla/images/offsite.gif) no-repeat center right;
padding-right: 8px;
}
#contentcenter a[href^="http://www.mysite.com"], a[href^="http://mysite.com"] {
background: transparent;
padding-right: 0;
}Assign the image links in question a class.
CSS:
<style type="text/css">
<!--
#contentcenter a[href^="http://"] {
background: url(/enla/images/offsite.gif) no-repeat center right;
padding-right: 8px;
}
#contentcenter a[href^="http://www.mysite.com"], a[href^="http://mysite.com"] {
background: transparent;
padding-right: 0;
}
#contentcenter a.img_link {
background: transparent;
padding: 0; /* If you still want padding on the image, delete this and put in your CSS */
}
#contentcenter a.img_link:hover {
background: transparent;
padding: 0;
}
-->
</style>
The image HTML w/ link:
<a href=http://www.webdeveloper.com/forum/archive/index.php/"mypage.html" class="img_link"><img src="images/myimage.gif" alt="myimage" /></a>
That should work. Tell me if it doesn't...Just tried - it doesn't work.
Is there a way to do a reverse select in CSS? i.e. Instead of using a img {style here;} to select images nested within <a> tags, I want to find a way to select <a> tags that contain images.Reply to first question is to 'hide' the background image (glyph);
#contentcenter a[href^="http://"] img {
margin-right:-8px;
}Closer Fang, but still not quite. This causes text adjacent to the linked image to overlap the image, but the glyph is still there, butting into the text.It works unless there is more css affecting the elements. A link?I wish I could post a link! (internal server - confidential content).
As for CSS, there is a float involved. Here is a snippet of the relevant bits of my code:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Offsite links</title>
<style type="text/css">
ul.noindent {
list-style: none;
margin: 0;
padding: 0;
}
img {
border: none;
}
.floatleft {
float: left;
margin-right: 5px;
margin-bottom: 5px;
margin-top: 5px;
clear: left;
}
a[href^="http://"] {
background: url(images/offsite.gif) no-repeat center right;
padding-right: 8px;
}
a[href^="http://www.mysite.com"], a[href^="http://mysite.com"] {
background: transparent;
padding-right: 0;
}
a[href^="http://"] img {
margin-right:-13px;
}
</style>
</head>
<body>
<h2>Feature Items</h2>
<ul class="noindent">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.external.com"><img src="images/myimage.gif" width="75" height="47" alt="my alt text" class="floatleft" /></a>My text with a link to <a href="http://www.external.com">external.com</a></li>
</ul>
</body>
</html>Remove the .floatleft and add:a[href^="http://"] img {
vertical-align:text-top;
margin-right:-13px;
border-right:13px solid white; /* document bgcolor */
}
#contentcenter a[href^="http://"] {
background: url(/enla/images/offsite.gif) no-repeat center right;
padding-right: 8px;
}
#contentcenter a[href^="http://www.mysite.com"], a[href^="http://mysite.com"] {
background: transparent;
padding-right: 0;
}Assign the image links in question a class.
CSS:
<style type="text/css">
<!--
#contentcenter a[href^="http://"] {
background: url(/enla/images/offsite.gif) no-repeat center right;
padding-right: 8px;
}
#contentcenter a[href^="http://www.mysite.com"], a[href^="http://mysite.com"] {
background: transparent;
padding-right: 0;
}
#contentcenter a.img_link {
background: transparent;
padding: 0; /* If you still want padding on the image, delete this and put in your CSS */
}
#contentcenter a.img_link:hover {
background: transparent;
padding: 0;
}
-->
</style>
The image HTML w/ link:
<a href=http://www.webdeveloper.com/forum/archive/index.php/"mypage.html" class="img_link"><img src="images/myimage.gif" alt="myimage" /></a>
That should work. Tell me if it doesn't...Just tried - it doesn't work.
Is there a way to do a reverse select in CSS? i.e. Instead of using a img {style here;} to select images nested within <a> tags, I want to find a way to select <a> tags that contain images.Reply to first question is to 'hide' the background image (glyph);
#contentcenter a[href^="http://"] img {
margin-right:-8px;
}Closer Fang, but still not quite. This causes text adjacent to the linked image to overlap the image, but the glyph is still there, butting into the text.It works unless there is more css affecting the elements. A link?I wish I could post a link! (internal server - confidential content).
As for CSS, there is a float involved. Here is a snippet of the relevant bits of my code:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Offsite links</title>
<style type="text/css">
ul.noindent {
list-style: none;
margin: 0;
padding: 0;
}
img {
border: none;
}
.floatleft {
float: left;
margin-right: 5px;
margin-bottom: 5px;
margin-top: 5px;
clear: left;
}
a[href^="http://"] {
background: url(images/offsite.gif) no-repeat center right;
padding-right: 8px;
}
a[href^="http://www.mysite.com"], a[href^="http://mysite.com"] {
background: transparent;
padding-right: 0;
}
a[href^="http://"] img {
margin-right:-13px;
}
</style>
</head>
<body>
<h2>Feature Items</h2>
<ul class="noindent">
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"http://www.external.com"><img src="images/myimage.gif" width="75" height="47" alt="my alt text" class="floatleft" /></a>My text with a link to <a href="http://www.external.com">external.com</a></li>
</ul>
</body>
</html>Remove the .floatleft and add:a[href^="http://"] img {
vertical-align:text-top;
margin-right:-13px;
border-right:13px solid white; /* document bgcolor */
}