need help using attribute selectors

[RichyVn]

I have a problem getting this to work:

I have a link to a .pdf file which i want to style with an pdf icon on the right side next to the link.
So its obvious that your are going to open a pdf file.
I use an attribute selector to target this. So far so good.

I am using the following code:

a[href$=".pdf"]

{

padding-right: 50px;

background-image: url(../images/link-pdf.gif);

background-repeat: no-repeat;

background-position: right center;

}

The problem is that the image is’nt showing up next to the link text, but underneat it!
What am I missing here?

[RichyVn]

Come on!!
Is there really nobody who has any idea?
— edit —

[TheDoc]

That type of attitude probably won’t get you much help…

Do you have a link to the problem?

[RichyVn]

well…thats probally true but … it did trigger you to respond ;-)
No I dont have a link but the exact code is above.
Its not online yet.
I have noticed its only “visible in IE” but its under the link text. Its not pushing the image next to the link text??

In FF its not showing up at all?

Thanks for responding though. I did take out the offending line.

[noahgelman]

It’s hard to say without looking at it, but is it possible that with the added padding the link is now too wide for the element it’s in so the link is defaulting to 2 lines? With the background-position: right center; it would place it sort of under the text in this case.

I don’t think that that’s the answer, but it could be. Could be one of a dozen little things

[RichyVn]

Okay I have uploaded my redesign testsite in developement.
Its here in developement

The pdf icon and link should be visible (in IE only) in the middle section “visitekaart”
So what I want is to show the icon 50px beside the text… on the left

Hope this will help to target the problem.
Thanks so far

[dhechler]

Ok, so just giving it a quick look, I came up with this. Just using Inspect Element in Chrome, this seems to work.

#content a {

background-color: #F5FAFC;

border-bottom-color: #CDCDCD;

border-bottom-style: dashed;

border-bottom-width: 1px;

color: #025BB9;

padding-bottom: 1px;

padding-left: 2px; -- GET RID OF THIS --

padding-right: 2px;

padding-top: 0px;

text-decoration: none;

}



a[href$=".pdf"] {

background-image: url(http://www.vannaamen.nl/develope/images/link-pdf.gif);

background-position: 0px 50%;

background-repeat: no-repeat;

padding: 0px 0px 0px 45px; -- THIS REPLACES ABOVE PADDING --

text-indent: 30px;

}

[jamygolden]

#content a[href$=".pdf"] {

background: #F5FAFC url(../images/link-pdf.gif) no-repeat right 2px;

padding: 0 50px 0 0;

}

[RichyVn]

@Jamy-za.

Thanks man!
That did the trick.

I did not try the listing from dhechler but I think that would work as well.
Thanks also for your input.

Seems like you need the #content div in front of the selector? I thought it would work without the extra “specificity” because I am using attribute selectors…

[Author]

Posts