SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2003
    Location
    US
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    "Underlining" an h1 using border-bottom

    Can anyone please tell me the best way to mark up something like this...

    Heading___________

    (imagine that's one long straight line that extends to the edge of the page)

    How do you get the border-bottom to almost butt up to the typographical baseline of the letters (in other words, so that the descendent bits of letters like y and g are below the line)?

    I'm using...

    HTML Code:
    <h1>Heading</h1>
    Code CSS:
    h1 { 
    font: bold 2.6em Arial, Helvetica, sans-serif;
    padding: 0;
    border: 1px solid #ccc;
    }

    but the border-bottom goes too low by default, below the bottom of letters y and g.

    If I try to bring it up by adding line-height: 0.8em to the h1, this closes up the gap nicely in FF, but IE cuts the bottom of the letters off.

    Has anyone managed to do this satisfactorily for IE and FF without resorting to conditionals? It seems like it should be so simple!!

    Should I be using a tiling background-image instead to create the underline (/bottom border)?

  2. #2
    SitePoint Evangelist hexburner's Avatar
    Join Date
    Jan 2007
    Location
    Belgium
    Posts
    591
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try using a background image.

    Code CSS:
    h1 {
        background-image:url("images/underline.gif");
        background-position: 0px bottom;
        background-repeat: repeat-x;
    }
    FOR SALE: 1 set of morals, never used, will sell cheap

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2003
    Location
    US
    Posts
    95
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, of course it is! Thanks! I can't believe I didn't work that one out actually.... for some reason I let myself get fixated in negative margin and line-height hell!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •