Yucca, the padding-left is to put a bit of space between the last letter of the
link and the document icon. The issue with the icon appear to the far right
is, in this case, because my links are list items.
Angela French
13.8.2011 2:30, Angela French wrote:
> I'm trying to find a way to display a document file type icon after links to
> such documents. I am trying this code:
>
> a[href$='pdf']
> {
> background:
> url(http://168.156.9.250:8080/imgs/layout/icon_pdf.gif) no-repeat right;
> padding-left:20px;
>
> }
I don't quite see why you set padding on the _left_, when the image is to
appear on the _right_ and space should be reserved for it there.
Using padding-right instead seems to get the desired effect on modern browser.
> The problem with this is that on a long link that wrap to the next
> link the icon doesn't appear right at the end of the link label, it appears
> to the right (the end of the blocked element).
There must be something else in the play then... Let me guess: you set
display: block for the links? In that case, the default width is the available
width, and the background image appears at the right side of that. The intended
use of an icon requires the element to be inline, so you need to adapt to that.
If you need block-like behavior for other reasons, you need to wrap the <a>
element inside a block-level container (or a container that you style with
display: block).
> Does anyone know of a sure fire way to display icons after links with css?
It cannot be 100% sure. Not all browsers support attribute selectors,
especially the CSS 3 $= construct(you might avoid this by using classes, but
that would be awkward and often inapplicable). There is no certainty that
background images are shown; they are commonly suppressed by browsers on
printing (by default).
--
Yucca, http://www.cs.tut.fi/~jkorpela/
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
