Hi List,
I'm trying to code a Photoshop layout given to me where the H1 element
has a border-bottom that is only the length of the text. I first tried
this:
<!-- Example 1 -->
h1 {
font-size:160%;
font-family:"Times New Roman", Times, serif;
font-variant:small-caps;
border-bottom:1px solid maroon;
}
<h1>Lorem Ipsum Dolor Sit Amet</h1>
<!-- End Example 1 -->
The problem with the above is that the maroon line goes all the way to
the right edge of the container. As it should; H1 is a block level
element.
Even though the below example looks perfect, I would like to avoid using
a span tag if possible, because in addition to extraneous markup, the
site content will be editable from within a CMS and I can't expect my
users to know about inserting span tags inside their h1's...
<!-- Example 2 -->
h1 {
font-size:160%;
font-family:"Times New Roman", Times, serif;
font-variant:small-caps;
}
h1 span {
border-bottom:1px solid maroon;
}
<h1><span>Lorem Ipsum Dolor Sit Amet</span></h1>
<!-- End Example 2 -->
I just discovered that display:inline-block gives me exactly what I want
in Gecko:
<!-- Example 3 -->
h1 {
font-size:160%;
font-family:"Times New Roman", Times, serif;
font-variant:small-caps;
border-bottom:1px solid maroon;
display:inline-block;
}
<h1>Lorem Ipsum Dolor Sit Amet</h1>
<!-- End Example 3 -->
But as with most wonderfully simple solutions, of course, IE6
misbehaves.
I've already had a look at trying to force hasLayout, using zoom: 1 [1],
and other IE6/7 inline-block posts[2] but none seem to work in my case.
Any suggestions?
Thanks,
Geoff
[1] http://www.satzansatz.de/cssd/onhavinglayout.html
[2] http://www.brunildo.org/test/InlineBlockLayout.html
______________________________________________________________________
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/
