CSS heading while using line-height to shift border?

Question

I'm using the following CSS:

h2 {
    font-weight: normal;
    border-bottom: 1px solid #DDD;
    font-size: 1.6em;
    font-style: italic;
}

h2 span {
    position: absolute;
    top: 7px;
    padding-right: 6px;
    background-color: #F9F9EE;
}

When used like:

<h2><span>abc</span></h2>

Gives the following effect:

abc ------------------

The text 'abc' is the heading content while the dashed line is the border being shifted. The following approach works well so long as you only use it once on the page. My question is, how can I achievement the same effect without using absolute positioning or even perhaps line-height since I suspect either or both are the culprits.

I do remember seeing the same effect being used on a few blogs but the url slips my mind.

Thank you. :)

Answer 1

I'm not entirely sure what you're trying to do and what the problem is exactly, but adding position: relative; to the h2 style will create a positioning container in which the span position: absolute; will calculate its values from.

Answer 2

Hi lengtche, I don't see the effect that you described in Firefox, only in IE6.

One way you could achieve this effect is to use a single pixel background image, tiled horizontally at 50% of the height of the div. It's not as nice, since you do have to use an image, but it should look how you want without affecting the HTML.

I'd suggest something like:

h2 {
 font-weight: normal;
 font-size: 1.6em;
 font-style: italic;
 background: url(pixel.png) repeat-x 0% 50%;
}

h2 span {
 padding-right: 6px;
 background-color: #F9F9EE;
}

I've checked it in IE6 and Firefox, using it multiple times on the same page. :)

Answer 3

My favorite way to do this is:

<fieldset class="blah">
    <legend>Heading</legend>
content...
</fieldset>

and then add

fieldset.blah {border-top: 1px solid #999;}

in your CSS. Hope that helps.

Answer 4

As Rory mentioned, using position relative on the H2 tag solves the problem without the use of an image.

h2 {
    font-weight: normal;
    border-bottom: 1px solid #DDD;
    font-size: 1.6em;
    font-style: italic;
    position:relative;
}

h2 span {
    position: absolute;
    top: -0.8em;
    padding-right: 6px;
    background-color: #F9F9EE;
}

This works in the three browsers I use for testing (IE, Firefox, and Chrome).

Answer 5

Try this:

h2 {
  font-weight: normal;
  border-bottom: 1px solid #DDD;
  font-size: 1.6em;
  height: 0.75em;
  margin-bottom: 1.85em;
  overflow: visible;
  font-style: italic;
}

h2 span {
  padding-right: 6px;
  background-color: #F9F9EE;
}