23.8.2011 19:30, Philip TAYLOR (Webmaster, Ret'd) wrote:
Chetan Crasta wrote:
Using Firebug, this is what I found:
The "two" lines is actually a bottom border on the h1. The p element is
relatively positioned to overlap the bottom part of the h1. A background
color is set on the p to prevent the border from being seen over the
letters.
Clever ! Clever coding, and even cleverer detective work.
I was still instigating when Chetan published the solution.
I know the feeling... I had discovered the solution (after using Firefox
Web Developer Extension, Edit CSS function, setting the background of
the <p> element with the text to none) when I noticed that a solution
has been posted. :-(
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>.
--
Yucca, http://www.cs.tut.fi/~jkorpela/
______________________________________________________________________
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/
