0

I know it may sound stupid but I'm trying to change the background position for an 'anchor element' but I get no result.

The HTML looks like this:

<a href="http://google.com/" class="first-link">Link</a><a href="http://google.com/" class="second-link"></a>

For the .second-link:visited I want to change the background position, I have no idea why it doesn't work.

Update

The css for .second-link looks like this:

.second-link { background: url(../images/sprite.png) no-repeat -13px -124px; height: 20px; width: 15px; display: inline-block; margin: 2px 0 -6px 2px; }
Mathijs Flietstra
  • 12,900
  • 3
  • 38
  • 67
el.severo
  • 2,202
  • 6
  • 31
  • 62
  • 1
    Is second-link has `display:inline` ? If yes, `use display:inline-block` and set some `width & height` – Jashwant May 10 '13 at 07:11
  • 1
    can you create a js fiddle of the same ? – Jashwant May 10 '13 at 07:15
  • @Jashwant: it seems that I have to give up, its a [browser bug](http://stackoverflow.com/questions/3788855/google-chrome-avisited-background-image-not-working). Thanks anyway! :) – el.severo May 10 '13 at 07:57

1 Answers1

1

There is no content inside your a tag with the second-link class. Therefore it will not be visible on the page as both its width and height will be 0px. Adding some content content inside it will fix it, or if you don't want any content inside it, you'd have to set the a tag to display: inline-block; and set a width and a height on it to ensure that it is visible on the page.

Mathijs Flietstra
  • 12,900
  • 3
  • 38
  • 67
  • The 'a' tag is rendered but it doesn't override the background-position; I'll update the question with css, please check. Thanks! – el.severo May 10 '13 at 07:11