On Tue, Aug 23, 2011 at 9:47 AM, Jukka K. Korpela <jkorp...@cs.tut.fi> 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 [css-d@lists.css-discuss.org] 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/