Inconsistant CSS behavior with :target

Question

I'm attempting to use :target in CSS to correctly position anchor tags below the static header in this webpage.

On that page, each of the images has a block similar to this:

.anchor:target {
  padding-top: 18vh;
}
.anchor {
  margin-top:2vh;
}

div.figure_image {
  width:80%;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

figcaption {
  width: 65%;
  font-weight:bold;
  font-size:1.5vmin;
  margin-left:auto;
  margin-right:auto;
  padding-bottom:3vh;
}

<a class="anchor" name="fig3"></a>
<div class="figure_image">
  <figure>
    <a href="../Images/Articles/JMRC_43_Image03.TIFF">
      <img src="../Images/Articles/JMRC_43_fig03.JPG" />
    </a>
    <figcaption>Figure 3: Close-up of the “Balade at the Reverance of 
      Our Lady” stanza, Clopton chantry chapel, Holy Trinity, 
      Long Melford.
    </figcaption>
  </figure>
</div>

That contains the image, a link to a larger version of the image, and a caption.

This all works great in Firefox 48.0.1 on the Mac. However, when I open it in another browser the styling for .anchor:target does not work. I've tired Safari 9.1.2 and Chrome 54.0.2840.98 and had someone try it in Chrome on Windows (they didn't give me the version) and in all cases it does not seem to be working properly -- the image appears underneath the static header. My thought is that either :target or vh is not supported, but everything I've read suggests that these are very mature css elements that should work with the versions of the browsers I've tested with. While I have jquery on the page for Hypothes.is, I'd rather not write an extensive jquery solution if css will do the trick, so I'm hoping someone might be able to tell me if I'm either formatting things poorly or if there's something else I'm simply not considering.

Do you mean for the link? They're in a .pdf file -- these are links to color versions of images that are black and white in the .pdf. They're in the following format: http://www.minorworksoflydgate.net/Articles/JMRC_43_1.html#fig2 Where each figure is numbered from 2-7. — medievalmatt, Nov 25 '16 at 05:31
If there is no fragment identifier in your uri, that selector will not work. From the code you provided here, there does not seem to be anything pointing to your anchor, it doesn't even have an `id` attribute. What exactly do you think the `:target` pseudo-class do? — Ricky Ruiz, Nov 25 '16 at 05:37
If you're using `name` as the fragment identifier, I believe it no longer works in modern browsers, use `id` instead. — Ricky Ruiz, Nov 25 '16 at 05:40
You don't have to use the id attribute if your anchors are named using the name attribute, which these are -- see the top of the code block. — medievalmatt, Nov 25 '16 at 05:41
Switching to id doesn't change the behavior, but it looks like w3c hasn't updated their documentation (or hasn't written the version of the page for HTML5). I've changed it to id and will do so moving forward, but I'm still stumped on the :target thing. — medievalmatt, Nov 25 '16 at 05:48
Sure. Let me know if you want the full CSS and I can include that as an external reference. https://jsfiddle.net/fxbq1ekd/1/ — medievalmatt, Nov 25 '16 at 05:58
That awkward moment when *two* commentators don't know what a named anchor is, while the question asker does... — BoltClock, Nov 26 '16 at 14:23
@medievalmatt: The name attribute on elements is obsolete in HTML5, and authors should not use them moving forward. But if this is a legacy HTML 4 (or older) document you can expect it to just work - because if it didn't, that means legacy web pages would suddenly stop working, in the millions, which would be *bad news*. — BoltClock, Nov 26 '16 at 14:33

medievalmatt · Accepted Answer · 2016-11-26T12:58:33.360

1

What needs to happen for the css as I have it above to work in Chrome or Safari is that the anchor tag must display as block or inline-block. Firefox will handle it if it's displayed as the default inline. Making a negative margin will fix any padding issue.

.anchor:target {
    padding-top: 18vh;
    display: block;
    margin-top: -18vh;
    }

edited Nov 26 '16 at 12:58

answered Nov 26 '16 at 12:44

medievalmatt

427
2
12

This is the correct answer. Chrome tends to handle elements differently from other browsers. See also http://stackoverflow.com/questions/23642290/ie-offsetting-and-ignoring-height-width-of-anchor-focus-outlines – BoltClock Nov 26 '16 at 14:30

Inconsistant CSS behavior with :target

1 Answers1