Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

<span> wrapping a <a> (no floating involved)

2:29 pm on Aug 26, 2005 (gmt 0)

New User

10+ Year Member

joined:July 6, 2005
votes: 0

a.forumButton {text-decoration: none;
color: inherit;
padding: 4px;
border: 1px solid;
border-top-color: #aaaaaa;
border-left-color: #aaaaaa;
border-right-color: #666666;
border-bottom-color: #666666;
background: #999999;}
span.forumButton {
border: 1px solid #000000;

<span class=forumButton>
<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;
padding: 0;

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.

2:10 pm on Aug 27, 2005 (gmt 0)

Junior Member

10+ Year Member

joined:Aug 14, 2005
votes: 0

the padding thing should work fine, but only need one. Otherwise you might try the line-height: attribute ;)
7:50 pm on Aug 27, 2005 (gmt 0)

New User

10+ Year Member

joined:July 6, 2005
votes: 0

Line height worked ... I'm not sure why, but it worked like a charm! TY!
8:54 pm on Aug 27, 2005 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:June 6, 2004
votes: 0

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.


6:23 pm on Aug 30, 2005 (gmt 0)

New User

10+ Year Member

joined:July 6, 2005
votes: 0


Thanks for the explanation ... it helps me garner just a little more knowldge on CSS ... a subject so deceptively compex, that it makes my head spin.

Thanks again.