[sandsl]

I'm trying to get a CSS link icons working, where an icon is shown before or after a link.


Here is what I have so far:


CSS Code:

Code:
a {
	color: #6CB50E;
	text-decoration: none;
	font-weight: bold;
	border-bottom: 1px dotted #6CB50E;
	background: url(Bits/Icons/pending.tif) no-repeat 0px -1px;
	position: relative;
	padding-left: 16px;
}

How can I keep the dotted underline from appearing under the icon too? eg. just the Apple text should be underlined.

Thanks.

[Millennium]

Originally posted by sandsl:
I'm trying to get a CSS link icons working, where an icon is shown before or after a link.


Here is what I have so far:


CSS Code:

Code:
a {
	color: #6CB50E;
	text-decoration: none;
	font-weight: bold;
	border-bottom: 1px dotted #6CB50E;
	background: url(Bits/Icons/pending.tif) no-repeat 0px -1px;
	position: relative;
	padding-left: 16px;
}

How can I keep the dotted underline from appearing under the icon too? eg. just the Apple text should be underlined.

Thanks.

That technique cannot be used to remove the underline from the icon (which you shouldn't do anyway, as a usability issue; the icon is part of the link, and so it should carry the same decoration as the link).

If you insist on doing this, then you might have better luck with something like the following:

Code:
a:link:before {
  content: url(Bits/Icons/pending.tif)
}

This does, however, have several disadvantages:

• The icon is not part of the link, so it's not clickable.
• :before doesn't work in IE.
• content: doesn't work in IE.
• Do TIFF graphics work in IE? I don't know if they do.

[MaxPower]

You can also kludge it by removing the border-bottom declaration and putting it into another class. Then wrap the text part in a <span> and link it to the class you just made.

[sandsl]

Originally posted by Millennium:
...you shouldn't do anyway, as a usability issue; the icon is part of the link, and so it should carry the same decoration as the link.

From a usability standpoint, yes the icon should carry the same decoration as the link. From an aesthetical standpoint, no the icon shouldn't carry the decoration in this case.

The benefits of using icon links often out way the disadvantages and its worth considering for each use. Specifically, links with icons can be used to clearly and quickly illustrate that the link is external, is a mailto, causes or reveals a floating div etc...

Do TIFF graphics work in IE? I don't know if they do.

I'm playing around with whats possible. Thus, I simply picked a small icon I had laying around in a folder for testing purposes. I really wouldn't have put an orange dot next to green text The other clue is that the text doesn't make sense, and theres a typo. Finally, your suggestion doesn't work on IE either, so if I where to implement that, it would be irrelevant if IE supports tiffs.

Thanks for both your help, I got it working by moving the border-bottom declaration to a seperate class, as MaxPower suggested.

I'm considering using it for only a specific type of link, where mouseover reveals a floating div.

[Oisín]

Originally posted by sandsl:
I really wouldn't have put an orange dot next to green text

But you have no problems using a smiley with a red tongue on a green face?

Thanks for both your help, I got it working by moving the border-bottom declaration to a seperate class, as MaxPower suggested.

Doesn't that create a different problem? Specifically that IE only supports :hover for links, not classes, so that the link would then not get a border-bottom at all?

[Chris O'Brien]

I presume he'll be doing a:hover span {stuff} in order to do it, which will work in IE (I think).

[Oisín]

Originally posted by Black Book:
I presume he'll be doing a:hover span {stuff} in order to do it, which will work in IE (I think).

Oh, right, of course... didn't think of that smart and logical approach, duh

Feel free to ignore previous post - apart from the bit about the smiley, I thought that was quite funny myself*





* All right, all right, bordering on humorous, then!