Question

OK, I added a universal style to my main.css that says:

a:active {
  top:1px;
  position:relative;
}

This gives me a nice little “nudge” effect when anything is clicked. Consequently, I had to go around to all of my absolutely positioned <a> elements and fix them from jumping up to top:1px and manually give them the proper nudge.

Although I have run into this one case that has thrown me for a loop on a couple levels. I think I got the positioning all sorted out, but what’s happening when I click the anchor is that the <span> element that comes next in the containing <li> disappears while the anchor is being clicked.

I did try setting the <span> to float:left but instead of disappearing it just began lining up beside the anchor and hanging outside the containing <li>.

Here’s the page: http://beta.helpcurenow.org/media/videos/

What I’m referring to on this page are the thumbnails that sit below the main video window. There are thumbnail feeds from vimeo with a video screenshot and the meta data. The video screen shot has a hidden span in the anchor so that when you hover over the thumbnail it appears. This is what is causing the meta data to disappear when clicked.

And if you’d like to just see the markup here, it is below:

<ul id="video-gallery">
  <li>
    <a class="video-thumbnail" href="#">
      <img src="http://ats.vimeo.com/775/137/77513796_200.jpg" alt="Amy Fann Interview"/>
      <span class="play-arrow"></span>
    </a>
    <span class="video-metadata" id="video-13466402">
      <span class="video-title"><a href="#">Amy Fann Interview</a></span>
      <span class="video-likes meta">Likes <span class="value">0</span></span>
      <span class="video-views meta">Views <span class="value">2</span></span>
      <span class="video-duration meta">Duration <span class="value">01:48</span></span>
      <span class="video-post-date meta">Posted 1 day and 7 hours ago</span>
      <span class="video-url hidden-data">http://vimeo.com/13466402</span>
      <span class="video-description hidden-data">Amy Fann talks about her upcoming trip to Zambia as part of a CURE GO Team.</span>
    </span>
  </li>
</ul>

And the CSS…(obviously there are several other style rules for this section, but I’m going to try to include only the relevant ones)

li a.video-thumbnail span.play-arrow {
  display:none;
}
li:hover a.video-thumbnail span.play-arrow {
  display:block;
  width:122px;
  height:86px;
  background:url(/img/media/play-arrow.png) no-repeat center top;
  position:absolute;
  top:40px;
  left:50px;
}
li:hover a.video-thumbnail:active span.play-arrow {
  position:absolute;
  top:30px;
  left:40px
}
li a.video-thumbnail:active {
  position:absolute;
  top:auto;
}
li.added-video {
  display: none;
}

Answer 1

This CSS should fix your problem (at least it did for me in firebug):

li a.video-thumbnail:active {
    position: static;
}

li:hover a.video-thumbnail:active span.play-arrow {
    top: 40px;
    left: 50px;
}

I don’t know exactly why your meta was being hidden on :active, but the above prevents the position type of the thumbnail link from changing and keeps everything in place.