On Tue, Aug 23, 2011 at 9:47 AM, Jukka K. Korpela <[email protected]> wrote:
> 23.8.2011 19:30, Philip TAYLOR (Webmaster, Ret'd) wrote:
> But now you gave me an excuse to jump in, because I don't think the trick is
> particularly clever - it's not reliable, as it requires pixel-exact
> settings, and it is difficult to maintain (people tend to forget tricks they
> have used). It would probably be more robust to use a background image that
> consists of a horizontal line, positioning it suitably using the em unit, so
> that the position gets adjusted by font size. What I mean is
> <p><span>...</span></p>, with such background set on the <p> and with
> suitable padding (and solid color background) on the <span>.
I thought the lines were a fun idea.
But, also had some misgivings about how robust this particular solution was.
I've tried the following and found it fairly stable in the half-dozen
browsers I tested it in. I live in a zero bar geography so no mobile
tests at the moment.
h2 {
border-bottom: 2px solid #000000;
text-align: center;
width: 80%;
margin-left: auto;
margin-right: auto;
}
h2 span {
position: relative;
top: .45em;
border-bottom: none;
background: #ffffff;
padding-left: 1em;
padding-right: 1em;
}
Regards,
Claude Needham
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
