Screenshot 2.
http://www.leewillis.co.uk/patches/css-problem/inspect-img.png
This is a screenshot of inspecting the IMG element with Firebug confirming that the IMG doesn't extend all the way to the edge of the outline.

Screenshot 3
http://www.leewillis.co.uk/patches/css-problem/inspect-anchor.png
The is a screenshot of inspecting the anchor element with Firebug, confirming that the "anchor" is pushing the outline down below the image.

The question is what causes this behaviour, and how can I ensure that the size of the anchor doesn't extend (In any direction) past the boundaries on the contained content (The image)

2 answers

It looks like this isn't a bug, but just a general rendering rule that the browsers use - the <a> element is set to display:inline meaning that it's height is calculated by the browser to be that of the text surrounding it PLUS a little more on the bottom incase you have an underline property set using text-decoration:;.

The images height exceeds the calculated height of the inline anchor element, so it forces itself outside. This can't be avoided, and as far as i can tell by playing around with it for ~ 30 mins, there is no other way of making the browser correctly display the height of the outline.

There are however, three things you could do:

Ignore it: it isn't affecting your layout and people only see it briefly, and the only other people who see it are people with disabilities, navigating by keyboard and using the element's :focus style. The percentage of these users is low enough not to be a concern for visual purposes and in any case - it's not affecting your layout.

Set the anchor element (and possibly by extension, the img element) to be display:block;, this will ruin your chances of using the image comfortably inside a paragraph of text for example, but at 200px high it would look crappy in there anyway.

Fake it by adding an ID to the anchor tag, then setting that particular anchor to outline:none; when in it's :active state. Then you can add an outline to any image elements inside that particular anchor. You can see what i've done by downloading the HTML file here: http://cl.ly/1YGS.

But i think that approach number 3, while giving the visual effect you want, is the worst for accessibility.

Hi Dan, The outline wasn't actually the issue - so don't need to hide it - it was just a good way of showing the problem. As it happens this is a simple test case of a wider development, where I just needed to have the anchor element take up only the space required by the image. Adding display: block to the anchor didn't seem to change much - however changing the IMG to display: block has done the trick - thanks! — Lee Willis almost 9 years ago

The most crucial part of Figure 3 is the baseline (represented by the blue line), and its placement within the line box. The baseline's exact placement is dependent on the "default" font for the line box (represented by the red box), which is determined by the value of font-family for the element that contains the line box. It isn't possible for an author to change the baseline's position directly, so wherever it ends up is where it will be. The space below the baseline is referred to as "descender space" since that's where the descenders in lowercase letters like "j", "y", and "q" are drawn. Figure 4 shows what happens when we add an image to the mix.

Note where the image sits by default: its bottom edge is aligned with the baseline of the line box. This placement can be changed with vertical-align-- we'll talk about that in a bit-- but almost nobody ever changes the value from its default. Let's take away the text, and leave only the image, as was done in Figure 5.

So we have an image sitting on the baseline of a line box that contains only the image.

Your options

using a DOCTYPE that will trigger either "quirks" mode or "almost standards" mode, or not having a DOCTYPE appear in your document at all.

img { display: block; }

img { vertical-align: bottom; }

Eric Meyer goes into more detail in his article, if you're interested.