CODEWITHSUNDEEP
cssinternet-explorer-9background-image
kneidels
kneidels

Reputation: 914

issue with CSS background-position right in IE

i have the following code:

<p class="more"><a href="/stories" class="more">Read more</a></p>

and CSS:

a.more, a.back { padding: 0px 20px 2px 4px;}
a.more {background: url(../images/ui/arrowLeftBlue.gif) 100% 3px no-repeat;}

for some reason - when i JSfiddle it - it works. but when i view it in IE9 - the background image doesn't show on the right of the link. interestingly in IE8 - it shows fine.

here's a screenshot first in IE9 and then in IE8:

URL: http://bit.ly/wBsMBj

Thanks!

Upvotes: 1

Views: 1348

Answers (2)

kneidels
kneidels

Reputation: 914

OK - found the correct solution:

for some reason, the left-aligned paragraph needed to NOT have any padding in it. so i replaced the padding for margin instead.

then the BG image on the anchor kicked in. not sure why, but it works.

thanks anyway for the help.

Upvotes: 0

Shadow Wizard
Shadow Wizard

Reputation: 66389

Looks like it's due to the .. in the background URL. I guess IE9 start searching from the document itself while other browsers start searching from the style sheet file. So, IE9 simply can't find the file.

To solve this mess just use such path instead:

background: url(/images/ui/arrowLeftBlue.gif);

Next time, please post your real code to save people the need to view your source of the live site. :)

Upvotes: 1

Related Questions