...

View Full Version : Icon next to Link



vayumahesh
10-30-2009, 09:01 PM
I have the following CSS which will add an icon next to a link (on the right side).

.externalLink {PADDING-RIGHT: 13px; BACKGROUND: transparent url(external.png) no-repeat right center; }

This works fine for links which span only one line. It is not working (displayed in center of 2 lines and partially hidden) for links which span 2 lines (more than one).

How to fix this issue ?

abduraooft
10-31-2009, 08:29 AM
This works fine for links which span only one line. It is not working (displayed in center of 2 lines and partially hidden) for links which span 2 lines (more than one).

How to fix this issue ? Your issue is not clear. Could you post a link to your page and explain on the basis of that.

Rowsdower!
10-31-2009, 08:08 PM
I have the following CSS which will add an icon next to a link (on the right side).

.externalLink {PADDING-RIGHT: 13px; BACKGROUND: transparent url(external.png) no-repeat right center; }

This works fine for links which span only one line. It is not working (displayed in center of 2 lines and partially hidden) for links which span 2 lines (more than one).

How to fix this issue ?

Your issue is not completely clear, but the highlighted portion above is telling the background image to stay flush with the right-hand side of the element and center itself vertically within the element. If you intend for this background image to be docked at the top right then just change that part to "top right" and you will be done with the alignment problem.

As for the image being partially hidden, well, we really would need to see a test page to help out with that. As abduraooft suggested, please provide us with a link to your page.

met
10-31-2009, 09:01 PM
i assume you are setting the anchor to have a class of "externalLink".

I understand what you are asking but this can only be accomplished ( as far as I know) If you contain the anchor in a <span> or <div> and set the container to have a class of "externalLink".

As the ANCHOR is contained in the DIV, if the link is on 2 lines, the DIV gets made higher, so the background image is pushed down accordingly.

the downside is you need to set a width on the DIV as otherwise it will be 100%, which is no use, as the image will be all the way over to the right of the parent container.

If you can set a fixed width for each link, or the links are in a fixed size container then this will work ok.

there may be another way, but I can't think of many situations where a link spans on to two lines, so is this really worth worrying about?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum