SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Zealot get_dave's Avatar
    Join Date
    Nov 2006
    Location
    England, UK
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    H1, h2, h3 elements causing line break - why?

    I really hope someone can enlighten me.

    Basically I have been trying to use h1, h2, h3...etc more in my XHTML so that I can have a more semantic markup.

    I am trying to use a h2 element as the title for a article on a news page. However when I then try and place the article text (enclosed on a <p> element) underneath I get a massive gap between the h2 element and the <p> elements underneath it? WHY IS THIS?

    Also different browsers render this differently (now there's a suprise!). Any tips?

    PLEASE HELP because i'm starting to get annoyed

    Many thanks,

    David
    I'm looking for a link exchange.
    contact me or head to:
    http://www.aheadcreative.co.uk

  2. #2
    He's No Good To Me Dead silver trophybronze trophy stymiee's Avatar
    Join Date
    Feb 2003
    Location
    Slave I
    Posts
    23,424
    Mentioned
    2 Post(s)
    Tagged
    1 Thread(s)
    Hx tags are block level elements. Block level elements always cause a break. Additionally the space you see is cause by padding and/or margins.

    If you want a block level element to be inline and you want to alter the amount of space around them you can use CSS float, margin, and padding attributes to alter those tags.

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you don't want a bottom margin for your H2, you should set it to zero:
    Code:
    h2 {margin-bottom:0}
    Note, however, that any top-margin of the following element will also come into play.

    If you want an H2 to appear inline at the beginning of a paragraph, you should – in theory – use
    Code:
    h2 {display:run-in}
    AFAIK only Opera supports that, though. Floating the heading, as John suggested, might be the only cross-browser way.
    Birnam wood is come to Dunsinane

  4. #4
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    AFAIK only Opera supports that, though.
    FWIW, WebKit supports it too.
    Simon Pieters

  5. #5
    SitePoint Zealot get_dave's Avatar
    Join Date
    Nov 2006
    Location
    England, UK
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh yeh i get it. I did try removing the margins to no avail. I do remember reading somewhere about the doubling up of margins on certain elements. Some kind of bug. Could that be the problem?

    Thanks guys
    I'm looking for a link exchange.
    contact me or head to:
    http://www.aheadcreative.co.uk

  6. #6
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Hav you also removed the padding (of both the P and H* elements)?
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Or just strip the margins and padding from everything by putting this at the top of your stylesheet (before any other style rule)?
    Code:
    * {
        margin: 0;
        padding: 0;
    }
    It's not a hack, but the universal selector (* character) applying a zero margin and padding to (virtually) every element on a Web page that references the stylesheet.

  8. #8
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    True, but that will also mean that he will have to manually re-assign any margin and padding which is currently used.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  9. #9
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Which will also solve a lot of other problems he may not even be aware that exist.

  10. #10
    SitePoint Wizard bronze trophy C. Ankerstjerne's Avatar
    Join Date
    Jan 2004
    Location
    The Kingdom of Denmark
    Posts
    2,702
    Mentioned
    7 Post(s)
    Tagged
    0 Thread(s)
    Agreed, and unless a website only uses a limited number of elements, it can be a good idea, but it's still something which has to be considered.
    Christian Ankerstjerne
    <p<strong<abbr/HTML/ 4 teh win</>
    <>In Soviet Russia, website codes you!

  11. #11
    SitePoint Enthusiast logothon's Avatar
    Join Date
    Mar 2007
    Location
    Irondequoit, NY
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    big h1 and p gap

    You might want to also think about giving that particular "h1 and p" element a class name and then zero out the margins and padding or set them to how you want it. that way your not affecting the other h1 and p elements on the page

  12. #12
    SitePoint Evangelist croatiankid's Avatar
    Join Date
    Mar 2007
    Location
    Zagreb, Croatia
    Posts
    409
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, nobody said this yet (lol)?
    Code:
    display:inline
    will eliminate the line-break.

  13. #13
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Which in turn will cause the element to be displayed as if it were in-line content. In this case it would be like using a bazooka to swat a fly.


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
  •