Ask the CSS Guy

As a self-taught web designer, I always run across techniques and shortcuts for developing web pages I didn't know existed. You talked about this like it's something everybody knows already but I assure you, it was new to me, and MUCH APPRECIATED!

I had no idea CSS was smart enough to work conditionally. It reminds me of an if-then statement combined with search strings.

One question: I have no idea that the square brackets were used in CSS; is this their only use?

Caret, shurely?! (Diamonds aren't forever.)

Great article - thanks for the idea! Are the icons you used here available for public use?

Excellent article. I've been looking to do this for a while, but had no idea I could do acheive this in CSS. Thanks.

a[href $=\'.pdf\'] {
padding-right: 18px;
background: transparent url(icon_pdf.gif) no-repeat center right;
}
a[href ^=\"mailto:\"] {
padding-right: 20px;
background: transparent url(icon_mail.gif) no-repeat center right;
}
/*a[class =\"popup\"] {
padding-right: 18px;
background: transparent url(icon_popup.gif) no-repeat center right;
}*\\
a[class ~=\"popup\"] {
padding-right: 18px;
background: transparent url(icon_popup.gif) no-repeat center right;
\\



View Help
Help Page
Contact Me
View Holidays
(please fix my markup)

Thankyou very much - this was exceptionally useful!

tnx..

Since I'm having some trouble with favicons, maybe you have a solution for just excluding local links that are coded as either "http:\\mydomain.com\localpage.htm" or "localpage.htm" by adding 2 conditions:

a[ href ^=\"http:\" AND href NOT^=\"http:\\mydomain.com\" ]

1st part excludes "localpage.htm" by only styling http links, 2nd part then bypasses "http:\\mydomain.com\localpage.htm" by excluding mydomain.com from the 1st condition

I'm not sure how to parse the "NOT" and other characters in the domain into readable javascript (such as the double backslash).

That way I could just automate my external links in a blog entry via css by doing:

.blogentry a[javascript code goes here]
{
padding-right: 18px;
background: transparent url(externallink.gif) no-repeat center right;
}

Since I'm having some trouble with favicons, maybe you have a solution for just excluding local links that are coded as either "http:\\mydomain.com\localpage.htm" or "localpage.htm" by adding 2 conditions:

a[ href ^=\"http:\" AND href NOT^=\"http:\\mydomain.com\" ]

1st part excludes "localpage.htm" by only styling http links, 2nd part then bypasses "http:\\mydomain.com\localpage.htm" by excluding mydomain.com from the 1st condition

I'm not sure how to parse the "NOT" and other characters in the domain into readable javascript (such as the double backslash).

That way I could just automate my external links in a blog entry via css by doing:

.blogentry a[javascript code goes here]
{
padding-right: 18px;
background: transparent url(externallink.gif) no-repeat center right;
}

very cool...much better way of doing it than how I'm doing it at the minute - adding different classes to different links!

Is there any way to include alt/title-text on the images? I can see some people wanting alt-text on the link, and then alt-text on the image to explain what the icon means.

For alt text I think you'll have to do it differently using Javascript. If for example you have a loop going through all A tags on the page you could check the type of link and change the title text of the link accordingly....or maybe just have it in the title in the first place?

Great tut, thanks!

Rather than alt text for the image, just use the title attribute on the anchor tag e.g., title="Opens Adobe Reader".

For the popup class, I think that a.popup would work just as well in the CSS and apply to older browsers as well.

this a very great tutorial !

i never knew i could use CSS this way !

thank you very much, i'll be posting this to my blog ^^

Thanks for the overview...I look forward to using these techniques in the near future.

James

Thanks alot for the suggestion, however, due to my naive experience w/css, I'm having trouble getting this to work. I don't know exactly what I'm doing wrong.

I opened DW8 and i opened a new CSS file and named it
whatever I want. I just copied n paste your css mockup and it seems like it's not a valid mockup. Specifically, it has something to do with the first line not being correct.

Please help.

Thanks,
Jimmy
here's my css code in dw8
***********************
/* CSS Document */
a[href $=\'.pdf\'] {
padding-right: 18px;
background: transparent url(icon_pdf.gif) no-repeat center right;
}
********************

CSS seem to have problem with the first line "a[href]
am I missing a # before the a [href]
or something.

thanks alot.

liquid parallax:

a[href^="http:"]:not([href^="http://mydomain.com"])

That should work in Gecko, but I think other borwser support is lacking.

I suppose i'll be the first to say it. IE does not like the CSS. Firefox works fine though. Any suggestions?

Hmm i also seem to be having a phantom email link eventhough i only have two mailto: links. Any suggestions?

haha nevermind i've found the error. Its always the most simple of errors!

I'd love to get this going on my site. It'll work with IE7 but can't get it to work with IE6. Is there a way?
Thanks.

@colin: Unfortunately, attribute selectors (as most other powerful or cool CSS features) are not supported by IE6, which is actually the reason why they're unknown to people who study CSS in dilettante.

I just wanted to point out the fact (I skimmed through the article so forgive me if it's mentioned somewhere and I just missed it) you can use any HTML attribute as a selector, and that's really where this technique shines. For instance, a more common use of the attribute selector in the context of your popup example would be:

a[rel="popup"] {
padding-right: 10px;
background: url(popup.gif) no-repeat right;
}

Then, all you have to do is add a rel="popup" in you HTML href.

Thats a nice stuff guys, well i not broadning my mind to think many of these much, i got now new ideas to implement.

thanks

Thanks for the code, I have implemented this in some of my sites already! I found a way to work around the IE6 issue; I have outlined it at my blog (http://www.meranda.org/blog/article.asp?BlogID=891).

Basically, I use jQuery to determine if the browser is IE6 (or lower) and if so, apply a class style to the A tag.

So far, it works great. Unfortunately it excludes anyone with JavaScript turned off, but as far as I figure I'll probably miss some links through manual updates anyway.

Thanks again!

Firefox addon TargetAlert
http://www.bolinfest.com/targetalert/index.html

I love this Tutorial so much that I wrote a translation for all the guys who prefer german language:

Read it here on www.martinterber.com

Eine Übersetzung dieses Tutorials auf Deutsch findet ihr auf www.martinterber.com

Good work all the way.

Hi there, this is a great idea, but I'm not able tog et it to work for some reason, in either WinXP/IE7 or WinXP/Firefox. Here are my style definitions (mainly what you use, but shortened a couple of them and I'm using Seth Meranda's JQuery script as well):

/* Link Cues */
/* all A tags whose HREF attribute ends in .pdf */
a[href$='.pdf'],a.application-pdf {
padding-right: 18px;
background: transparent url(icon_pdf.gif) no-repeat center right;
}

a[href ^="mailto:"] {
padding-right: 18px;
background: transparent url(icon_mailto.gif) no-repeat center right;

}

/* all A tags whose CLASS attribute is popup */
.popup {
padding-right: 18px;
background: transparent url(icon_popup.gif) no-repeat center right;
}

/* all A tags whos CLASS attribute is external */
.external {
padding-right: 18px;
background: transparent url(icon_external.gif) no-repeat center right;
}

and here are a couple links that I have tried it with, but won't work:

[a href="or/index.php" title="Featured Listings" class="popup"]Featured[/a]
[a href="http://armlsidx.vstone.com/?agentid=km236" title="Property Search" class="external" ]Property Search[/a]

Can anyone give me some insight as to why this isn't working for me? I have defined a DOCTYPE to my page, so it should work in IE7 and I have no idea why it's not working in Firefox.

*confused*

Sure, here is a test page I set up:

http://www.kathymcalpin.com/test_space/nlarchives.html

and here is the stylesheet:

http://www.kathymcalpin.com/test_space/CSS/mainsite_v2.css

*smacks forehead*

Of course! It works now...

I feel pretty silly. When I was creating that section of my style sheet I forgot that I had put it in its own folder and I'd need to use the top level generic path name (..).

Oh well, thanks for your quick responses, you (and your site) are very helpful!

I really like this trick, I've changed the position of the pdf icon for that page above, they were really showing how uneven the ends of the links were, so I moved them over to the left side, works much better for that list now.

here's a look: http://testsever.kathymcalpin.com/nlarchives.html

oops! that should be:
http://testserver.kathymcalpin.com/nlarchives.html

How would you lump multiple extensions into one? This doesn't work
a[href $='.mp3,.wav,.ogg'] {
padding-right: 16px;
background: transparent url(play.gif) no-repeat center right;
}

Is this as shorthand as it gets?

a[href $='.mp3'], a[href $='.ogg'], a[href $='.wav'] {
padding-right: 16px;
background: transparent url(play.gif) no-repeat center right;
}

Dear Gentlemen: I would be grateful if anyone could tell me what the rank of Cfn. stands for.. in the Canadian Infantry Corps tfd. R.C.E.M.E. in WWII. Thank-you.

I can't seem to make the icons work in IE7. Could you take a look. I have changed the doctype, many times, but nothing is helping. Works wonderfully in Mozilla, but most of our parents don't (are to silly not to) use mozilla.

Here are the links

css:
http://www.jubileechristianschool.org/cssFiles/icons.css

php
http://www.jubileechristianschool.org/index44.php

It's just gonna be something small and stupid, I just know it :P

Thanks in advance.

Thanks for the insight to new uses of css. I always like to learn new stuff and apply them asap. Hope to use these soon. Thanks again jk

Line wraps are really problematic in ie7. Even positioning the icon to the left causes funky results in the following situation:

text text text text text text text text text link_begins_
and_wraps_to_next_line

the icon ends up mushed into the left center of the text.

dang.

For the IE 7 line-wrap thing, try using "zoom:1;" in the style. For some reason it seems to work, although "zoom" isn't really a valid attribute. You take what you can get, I guess.

Thanks for the great article! It was exactly what I was looking for.

Hello thanks for a great article.
I have made a post on my blog about this, i tried to use trackback, but it didn't work.

In my example I have created the external CSS icon rule by creating two styles.

One style that applies external icon to all links that start http:// then another CSS rule to hide the icon with links that start with my domain eg: http://www.creativewebspecialist.co.uk

I hope that helps anyone having that problem.

Thanks again for your article, it really helped me out :)

Warren

You could automaticaly display external link icons using the below CSS. But this CSS *must* come at the top of your style sheet, or it will break the YouTube, Flicker, ICQ styles etcetera.

/* External Links */
a[href ^="http://"] {
padding: 5px 20px 5px 0;
background: transparent url(icon_external.gif) no-repeat center right;
}
a[href *="askthecssguy.com"] {
padding: 5px 0 5px 0;
background: none;
}

It works like this. The first style, a[href ^="http://"] says any link that starts with http:// should have the external link icon. The second style, a[href *="askthecssguy.com"] overrides that style by saying, anything that contains my domain name should have no icon or padding.

It has to come before the YouTube, Flicker, etc styles because those also override the a[href ^="http://"] style. If that style were listed last, it would override YouTube, Flicker, et al.

Oops, my previous comment works, but was referring in part to additional CSS provided at http://www.pooliestudios.com/projects/iconize/ that's based on this article. My bad! So just realized that the previously posted code works provided it comes first in your list of styles. (forget about YouTube, Flicker...) hehe! :)

sometimes I need to use a JavaScript to open a new window, and sometimes I simply use the 'target' attribute of the link to make a new window. This style allows you to do both and still use the 'popup' class if you so choose as well.

/* New Window */
a[class ="popup"], a[target ="_blank"], a[onclick*="popup"] {
padding: 5px 20px 5px 0;
background: transparent url(icon_popup.gif) no-repeat center right;
}

This style includes the 'popup' class as it was provided by this page, it also catches any links that include target="_blank", and when you use an onClick="popup(var,var,var)" style JavaScript function.

The function is below, this would go in the head portion of your page.

<script type="text/JavaScript">
function popup(theURL,winName,features) {
window.open(theURL,winName,features);
}
</script>

Example link:
<a href="javascript:void();" onclick="popup('http://www.askthecssguy.com/','','width=500,height=500')">Ask the CSS Guy</a>

Example link with all available attributes turned on:
<a href="javascript:void();" onclick="popup('http://www.askthecssguy.com/','NewWindow','toolbar=yes,location=yes,status=yes,menubar=yes,scrollbars=yes,resizable=yes,width=500,height=500')">Ask the CSS Guy</a>

Hi,

I think this article is great and am trying to implement now. I have added:

/* Link Cues */
/* all A tags whose HREF attribute ends in .pdf */
a[href$='.pdf'],a.application-pdf {
padding-right: 18px;
background: transparent url(images/icon_pdf.gif) no-repeat center right;
}

/* all A tags whose HREF attribute starts with mailto: */
a[href ^="mailto:"] {
padding-right: 18px;
background: transparent url(images/icon_mailto.gif) no-repeat center right;
}

/* all A tags whose CLASS attribute is popup */
a.popup {
padding-right: 18px;
background: transparent url(images/icon_popup.gif) no-repeat center right;
}

/* all A tags whos CLASS attribute is external */
a.external {
padding-right: 18px;
background: transparent url(images/icon_external.gif) no-repeat center right;
}

to my css file but only external and popup are showing in my css panel in dreamweaver. am i being think or do I need to add it a different way?

First of all let me thank you for this awesome little piece of CSS code, I've put it to good use already.

However, there seems to be problem that I cannot pinpoint. The icons are displayed in Mozilla, but not IE6 or IE7. The !DOCTYPE tag is in place, but the icons still aren't displayed.

What could be reason?

Sorry for the spam, but I already figured out what the problem was.

There was an automatically generated code (CMS) before the !DOCTYPE tag. Removing this did the trick and now it works wonderfully.

It's all nice. But what about multi-line links?

For links that wrap in multiple lines you may tray this:

Make the transparent area surrounding your little icon huge, and position your icon at the center and right of the canvas. For example, if your icon is 14 x 16, open it in Photoshop and make your canvas 1000 width x 100 height and align your icon to the right and vertically centered.

And that's it!

I hope this tip works for you as it did for me.

BTW: Excellent article and very nice site!

I've just realized that what I said doesn't work properly in Internet Explorer. It works fine in Mozilla Firefox, though.

Sorry!

PS: I meant to say "try", not "tray".

Has anyone found a solution to the problem of links that wrap to a second line?

In IE and sometimes even in Opera, if the bg icon is set to render to the right of the link, it centers the icon between the lines and sometimes squishes it underneath the text.

Well, I have been messing around with this for a while now, and I love it. There is one problem that I can't figure out.

On one particular page I have 4 email links total. 3 of the links are in the 'content' section, the 4th is in the 'foot'. All of the ones in the content section are the same email address, just linked 3 different times. The one in the foot is pointing to a different address.

The problem is, in the 'content' section, the first icon displays as it should, but the next two don't. There is space for it (an extended underline) but the icon just doesn't display at all. The icon for the 4th email link displays as it should as well.

Any ideas?

Oops. I forgot to add the link to the page:

http://testserver.kathymcalpin.com/prvacy_statement.html

Oh, and it is working as intended in FF 2.0.0.4, but not in IE6 (haven't tried with other browsers)

Let's try that again: http://testserver.kathymcalpin.com/privacy_statement.html

(I hate my keyboard sometimes...)

I too have found the technique inspiring and well-worth implementing in my works.

It does work flawlessly in Firefox 2, Opera 9 and Safari 3 for Windows; however, the links spanning two or more lines in Internet Explorer 7 were rather an eyesore, with images being cut off entirely or only partially visible.

What was worse, when I positioned them to the left and top of the anchors, they appeared quite arbitrarily, appearing as intended with one link and not appearing at all with the next, although there was room enough and the file extension and the appropriate image (e.g. zip image) the same.

I have since tried putting a separate CSS file in conditional comments,

e.g. <!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="style/anchors_amendment.css" media="screen" />
<![endif]-->

so as to keep it hidden from standards-compliant browsers and the W3C CSS validator, since the 'zoom' property is not recognized as valid. As it turned out, everything was rendered exactly as I had first intended it for Internet Explorer.

This is merely a sample declaration:

a[rel='external'] {
zoom: 1;
padding-left: 18px;
background: transparent url(../images/external_link.gif) no-repeat scroll left center !important
}

Oops... I have just noticed that the lines containing conditional comments wrapping the IE-only CSS link element were stripped after e.g..

I expect most people will be aware of how to use them anyway. If not, there is an example: http://en.wikipedia.org/wiki/Conditional_comments#Conditional_Comments

In addition, I would really appreciate if somebody would elaborate on Seth Meranda's jQuery technique for Internet Explorer 6 and lower. I tried it and it did not work at all. Although not versed in all things JavaScript, the'@' character that appears prominently in his example does somehow seem out of place to me.

This works perfectly except it does the EXACT opposite. I need the second part (in bold) to be a NOT and I can't seem to figure it out.

I have two sites darsys.com and darsys.net and this would (if fixed) treat all inter-site links as local because anything with a darsys in it would appear as a local link. But a link to foo.bar would be an external link and get the icon. I have a VERY short demo file that works beautifully except it's the OPPOSITE of what I want to happen. All the DARSYS files get the icon instead of not.

a[href $="http:"], a[href *="darsys."] {
padding-right: 18px;
background: transparent url(ext.gif) no-repeat center right;

A cc to any of my email addresses of any reply would be awesome, but I'll check back as often as possible.

OK! I got it to work. YAYAYAYAYAY!

The solution is a bit more complex. However I think sharing it would be good. I've actually got it up and running at my company's website(s) right now. The personal website requires a tad more work before I post it.

http://www.interstate-screw.com and the related http://www.tampin.biz site all have the code installed. Go to templates/style.css to see what the code is to make it work.

Please note the comments still refer to DARSYS.COM because I haven't fixed that detail yet. I hope to have the darsys.com and darsys.net bit fixed by the week-end however the CSS structure is a mess and I've got to fix it.

Thanks for everyone who helped and offered their support. I am posting this link to the solution because as a community we ought share what we learn. This post has been invaluable.

Great article. Thank you! It's working well for me. Except...

I'm working on a new version of our site that includes some simple block/border a:link styles (where a background color appears on rollover). The external link icon is appearing (within the border), but the links that apply to this code are negated by this code -- background color and border don't work on rollover. Why would that be?

Hi, I was wondering if I could use this to change the style of an element that contained a specific string, so for example paragraphs that contained "Bold" be bold, and paragraphs that didn't wouldn't be affected.
Ex:

<p>Example</p>
<p>Bold</p>

Example

Bold

Thanks,
Pirated

Fantastic bit of coding! I was using display: block to show/hide img elements on hover - now there's no need!

Phil

Is there a way to use this technique on the contents of the link as oppose to its attributes? I love putting pdf icons next to my text links but don't want them appearing next to images that link to a pdf. This is particularly relevant to my current project, where I have floorplans - on the left there's an image linking to the pdf and under the description a text link to the pdf - if it appears for both then the icon appears twice, the image one hanging around in very strange spots. this is for in a cms (drupal if you want to know although it has nothing to do with the css) where it will be managed by end users so I'd rather not ask them to select a class for text links or anything like that. Would be great if it's just automatic like this.

Hi there... this is great and just what I needed. Problem is it's really not looking too good in IE when the line breaks. The "zoom:1;" helps but it's still not good. It keeps the whole link together if it can which makes for funky line breaks. Is there a way to get it to work as nicely in IE as it does in Mozilla?

It works nicely on the Mac in Mozilla and Safari. It's just IE on the PC that's a problem and that's still the browser most used by our visitors.

I see Wikipedia is using this technique but they're having the same problem. There's got to be a way to get it working nicely in IE. I just don't have the skill to figure it out. Can you help?

Thanks for this...

but this will not work on IE7 if you have a link like this:
first
second

any ideas?

merci
isa

I'm very pleased... I've been puzzling over the IE two line problem for awhile and finally sat down to figure it out this morning and I think I've come up with a work around that will actually work nicely... and it's very simple. It's not perfect but it'll get the job done.

All you have to do is take the class out of the "a href" and move it to a "span" around the last word in the two line link.

Do you see any problems with that? Seems to be working for me on both platforms in all the browsers. What