homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

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

5+ Year Member

Msg#: 7330 posted 2:29 pm on Aug 26, 2005 (gmt 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.



5+ Year Member

Msg#: 7330 posted 2:10 pm on Aug 27, 2005 (gmt 0)

the padding thing should work fine, but only need one. Otherwise you might try the line-height: attribute ;)


5+ Year Member

Msg#: 7330 posted 7:50 pm on Aug 27, 2005 (gmt 0)

Line height worked ... I'm not sure why, but it worked like a charm! TY!


WebmasterWorld Senior Member 10+ Year Member

Msg#: 7330 posted 8:54 pm on Aug 27, 2005 (gmt 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.



5+ Year Member

Msg#: 7330 posted 6:23 pm on Aug 30, 2005 (gmt 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.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved