2nd a href does not apply style

[tonynoriega]

for some reason, teh 2nd anchor tag in this page is not applying the border bottom.

i have tried the LVHA method, and it still does not work...

any ideas?

div.tabContainer div.copy{height:80px; margin:205px 0 0 0; color:#000;}
div.tabContainer div.copy a{color:#646464; font-weight:bold; text-decoration:none; border-bottom:1px dotted #c6c1b8;}

<div class="tab current" style="background:#fff url(/_images/tab-home1.jpg) no-repeat top left;">
<div class="copy">
<h1>Perspectives on healthcare reform</h1>
<p>We support meaningful <a href="/healthcare-reform/index.asp">blank reform</a> bla blah blah blah. Find <a href="/directory/index.asp">resources and information </a> about our services.</p>
</div>
</div>

[alt131]

On the provided css and html snippet, there is no parent div.tabContainer, but rRemoving that (and defaulting to the background colour), and both links display the same in ie5.5-8, winSaf3, Op9, ff3.

Unfortunately I cannot reproduce the issue on only the second link without setting a width on the p that makes the text link the last line of the copy in the p itself. That suggests there may be other styles affecting what is happening.

However, if the browser/version clipping the border-bottom is ie7, it is a known issue. The common fix seems to be to set the link to

display:inline-block; 

on the a - which amongst other things triggers haslayout. However, that requires

vertical-align:bottom

to align the link with the surrounding text, and that combination produces undesired alignment issues in other browsers, so it really needs to be served via a conditional comment - and I think that's overly complicated for this.

Following the haslayout path, it is possible to trigger haslayout using

position:relative

- which avoids the issues associated with the commonly suggested inline-block.

However, my suggestion would be to start by looking at the basic code and try to avoid the issue itself. (From least to most disruptive):

1. The height set on the containing div (div.copy) is less than the total height required for the h1 and p. ie expands the div to contain the internal elements, but doesn't allow room for the border-bottom to be drawn. Remove the height from div.copy.
   
2. ie7 does not appear to expand the line-height to allow for the border to be drawn under the link text. (A unitless line-height is inherited and setting a font-size/lineheight combination is recommended, but explicitly setting

   line-height:1;

   on the a fixed the issue.
   
3. The border-bottom is clipped when the links are on the last line of the containing element (in this case the p). Write the copy so the text links are not on the last line of text in the p. (Or the p itself is not the last element inside div.copy)
   
4. Give either of the relevant parent elements padding-bottom to allow "room" for the border. (In this case the p, or div.copy.) 0.04em is probably enough for a 1px border.
   

[tonynoriega]

yes, it was the last line in the <p> tag... there was not margin or padding in a parent tag that stripped all padding and margin.

once i gave it a little padding on the bottom, 3px; it was fine. thanks.