July 21, 2006

CSS/CSS3 Jedi help request

If you're using Internet Explorer... just move along to the next post.

With the redesign, I found a really cool piece of code that allows me to add a little ⇗ after each link that takes people away from our site. It all happens automagically and shows up in fancy standards-compliant browsers. If you're seeing it on links, you're lucky. :D

My only problem (as evidenced by the beginning of this post) is that the ⇗ is getting appended onto my image links. When I float:right the image, the :after'd content is left out to dry.

Here's the offending code:
a[href^="http"]:after {
color: #ACAC65;
content: "\21D7";
font-size: 10px;
}
a[href^="http://patrickandlydia.com"]:after,
a[href^="http://www.patrickandlydia.com"]:after {
content: "";
}
a[href^="http://blogger.com"]:after,
a[href^="http://www.blogger.com"]:after {
content: "";
}


Notice that the last lines actually remove the arrow from local links and links to the comment section. My problem is that I want to remove the arrow from "a" tags that contain "img" tags, and I can't figure out a way to do that.

*.img:after {content: "";}

or any variation thereof doesn't work, because the CSS applies to the img tag.

I know that regular visitors to the blog probably will be completely confused by this post, but maybe someone surfing the blogosphere will see my cry and lend a hand.

No comments: