I don't mind the border appearing, its just the strange bit at the top that I dislike. I know I can work around of this, getting rid of the border altogether by using outline: 0
, but I also know that's bad.
The HTML setup is
<li>
<a href='..'><img alt='..' src='..'/></a>
<a href='..'>...</a>
</li>
An extract of the CSS:
li{
display: block;
width: 9em;
margin-right: 1em;
height: 12em;
text-align: center;
}
li img{
height: 8em;
display: block;
margin: 0 auto;
}
(The effect is similar if the two are combined in a single <a>
.)
I think this is related to using display: block
on the image. I've reproduced the issue here: http://jsfiddle.net/pvd69wce/