Welcome to WebmasterWorld Guest from 18.104.22.168
Forum Moderators: not2easy
<a class=forumButton href="page.asp" >link text</a>
Question: Why does the span not entirely enclose the anchor tag? The black border can be seen to the left and right of the link, but the height of the span is 1 normal line minus the to and bottom padding that the <a> tag has.
I want to span to fit snuggly around the anchor ... what am I doing wrong?
With some playing around, I've changed the SPAN CSS to this:
border: 1px solid #333333;
padding: 5px 0!important;
Which seems to work ... although I'm not sure how robust that is.
However, in Opera and IE my top border is disappearing ... all the others (on the SPAN) show correctly, but at the top only the border on the <A> is present ... why?
I tried adding border-collapse: separate to the span, but it made no difference.
I'm not sure why
Span is an inline element, which means it's height is defined not by it's content, but by either it;s own explicit line-height property, or by the line-height property on it's block level parent.
When you place an inline anchor inside of an inline span, and then apply padding and borders to the anchor, you end up with a situation where the height is being determined by the line-height property, but the content inside of that heighted line box is actually taller than the line box.
In such situations, FF lets content simply spill out. Thus, in that browser, the background on the anchor overruns the borders on the span. IE, on the other hand, attempts to autoenclose, increasing the dimensions of the span to encompass the dimensions of the anchor. This proves problematic, however, since the line box's line-height can't be expanded like a normal height property can. So you end up with the anchor and the span, both too tall, displaying whatever parts of themselves that they can within the limited confines of the line box. In IE, that translates to the left and right span borders showing, but the top and bottom one's, which are pushed out of view by the top and bottom padding, not.