Can i get rid of the line space when using h1 tags?

Discussion in 'HTML & Website Design' started by excaliburwebdesigners, Sep 22, 2007.

0
  1. #1
    I have put some text on my article directory using a combination of <h1> followed by <p> but there is a complete line of space between the header text and the paragragh text, how can i get rid of this?

    Regards :rolleyes:
     
    excaliburwebdesigners, Sep 22, 2007 IP
  2. classifieds

    classifieds Sopchoppy Flash

    Messages:
    825
    Likes Received:
    51
    Best Answers:
    0
    Trophy Points:
    150
    #2
    Try adding this to your css file:

    h1 {line-height:100%}

    or

    h1 {line-height:1em}
     
    classifieds, Sep 22, 2007 IP
  3. excaliburwebdesigners

    excaliburwebdesigners Peon

    Messages:
    501
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I have tried both

    .style1 { FONT-WEIGHT: bold; FONT-SIZE: 12px; h1 line-height:1em; }

    and

    .style1 { FONT-WEIGHT: bold; FONT-SIZE: 12px; h1 line-height:100%}

    neither seem to work, any idea where im going wrong?
     
    excaliburwebdesigners, Sep 22, 2007 IP
  4. excaliburwebdesigners

    excaliburwebdesigners Peon

    Messages:
    501
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Also just tried this

    .style1 { FONT-WEIGHT: bold; FONT-SIZE: 12px; }

    h1 {line-height:1em}

    putting the h1 statement on its own seperate line and no good :(
     
    excaliburwebdesigners, Sep 22, 2007 IP
  5. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I dunno that you can mix the px and em.

    We're assuming that the h1's default is to have a much larger line-height than normal to give it all that space.

    12px is about 1em I guess, but it's an h1 and it's nice to be big. Try\

    h1 {
    font-size: 1.4em
    font-weight: bold;
    line-height: 1.4em
    padding: 0;
    margin: 0;
    }

    This is really kinda hack-y but what I've done is set the font in ems and the line-height to an equal size. I would've used the shorthand "font" but that requires a font-type : )
    Then just in case there was also padding around the h1, I removed that as well.

    If there's still space, it may be coming from the <p> if it's got top padding or margins.
     
    Stomme poes, Sep 22, 2007 IP
  6. excaliburwebdesigners

    excaliburwebdesigners Peon

    Messages:
    501
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Hi "Stomme Poes"

    Tried that as well with no luck:(

    I think the is some conflicting style code, there no external style sheet and its difficult to find where the code is in the script, there is a style all ready set up as "heading" so i am using that instead of the h1 tag, not sure if thats as good for seo but its the best i can do for now :)

    BTW love your sig ;)
     
    excaliburwebdesigners, Sep 22, 2007 IP
  7. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Heh, thx.

    If you want, you could try to post the code that all seems to be affecting the heading area. Maybe one of us can see what's going on. It's very possible that something more specific is giving style to the h1, overriding newer code.
     
    Stomme poes, Sep 22, 2007 IP
  8. excaliburwebdesigners

    excaliburwebdesigners Peon

    Messages:
    501
    Likes Received:
    7
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Thanks for the offer, i have a small network of article directories i am working on, i have skipped that part for now, if i get a chance to come back to it tonight i will come back and post, but its 22:20 here at the moment GMT so may come back here tomorrow.

    Thanks again
     
    excaliburwebdesigners, Sep 22, 2007 IP