SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    Also available in Large Si's Avatar
    Join Date
    Sep 2002
    Location
    Walsall, UK
    Posts
    1,911
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Formatting H1 tag

    I'm formatting my Header tags (<h1>, <h2>) and have come across a problem with the linespacing. I don't want to use the double carriage return in the header tags, just a single carriage return.

    Does anyone know how to do this?

    My current H1 modifications are as follows:

    h1 {
    font-family: "Trebuchet MS", Arial, sans-serif;
    font-size: 21px;
    color: #CCCCCC;
    }

    Thanks for any help...
    Si
    Are you a Photoshop Jedi Master? Prove it!

    Is funky house your bag? You'll love this!

    Voice
    , eyes, ears, body and hands.


  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    Try adding margin: 0px; in your stylesheet.

    Paul

  3. #3
    Also available in Large Si's Avatar
    Join Date
    Sep 2002
    Location
    Walsall, UK
    Posts
    1,911
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nice one matey - works a treat!

    Thanks...
    Si
    Are you a Photoshop Jedi Master? Prove it!

    Is funky house your bag? You'll love this!

    Voice
    , eyes, ears, body and hands.


  4. #4
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i would add
    Code:
    margin-bottom: -1em;
    to your style...this should work regardless of what size the rest of the text is
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  5. #5
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    Hi,
    Try adding margin: 0px; in your stylesheet.

    Paul
    hmm...strangely enough that doesn't work for me...i had to resort to what i wrote in my previous reply to get the margin to change.
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  6. #6
    Also available in Large Si's Avatar
    Join Date
    Sep 2002
    Location
    Walsall, UK
    Posts
    1,911
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Both work fine for me - possibly cos I'm using IE6????
    Si
    Are you a Photoshop Jedi Master? Prove it!

    Is funky house your bag? You'll love this!

    Voice
    , eyes, ears, body and hands.


  7. #7
    Also available in Large Si's Avatar
    Join Date
    Sep 2002
    Location
    Walsall, UK
    Posts
    1,911
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry, I lied!!

    The version using the "em" factor managed to make the proceeding text completely overlap the header. Mental!!!

    Back to "margin: 0px;"....
    Si
    Are you a Photoshop Jedi Master? Prove it!

    Is funky house your bag? You'll love this!

    Voice
    , eyes, ears, body and hands.


  8. #8
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    is the text that follows your header in a paragraph, simply text not enclosed in any structural tag ? i tested the em solution with
    Code:
    <h1>header</h1>
    <p>and some copy</p>
    Edit:

    ah yes, i tested it without the paragraph, and indeed they overlap. semantically, the text following your header should be in some kind of "container" (usually a p tag)
    Last edited by redux; Mar 7, 2003 at 08:54.
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  9. #9
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I try to play safe with this sort of thing. The -1em solution works if the paragraph <p> has a margin-top: 1em. I think it's the default in most browsers though, which is why it works most of the time.

    If you specify the margin-top of the paragraph, it takes out one potential browser compatability bug.

    You want no space, so try this:

    Code:
    h1 { margin-bottom: 0; }
    p { margin-top: 0; margin-bottom: 1em; }
    hth,
    Douglas
    Hello World


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
  •