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 [cs...@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/