Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Aug 2009
    Posts
    407
    Thanks
    119
    Thanked 0 Times in 0 Posts

    fixing collapsing margins

    on this site i added a bottom margin to the h3 that starts off "Serving corporate and residential properties..." but for some reason it isnt getting applied.

    i suspect it has something to do with an issue called Margin Collapsing, which i've read up about but cant figure out how to fix in this circumstance. i tried a border, i tried padding, but nothing worked.

    please advise how to fix. thanks!

  • #2
    New Coder
    Join Date
    Aug 2009
    Location
    Cochin,India
    Posts
    39
    Thanks
    2
    Thanked 1 Time in 1 Post
    Try this

    <html>
    <head>
    <style type="text/css">
    h3
    {
    background-color:yellow;
    margin-bottom:100px;
    }
    </style>
    </head>

    <body>
    <h3>This is a heading with specified margins.</h3>
    some text

    </body>

    </html>

  • #3
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,302
    Thanks
    28
    Thanked 276 Times in 270 Posts
    Quote Originally Posted by sixrfan View Post
    on this site i added a bottom margin to the h3 that starts off "Serving corporate and residential properties..." but for some reason it isnt getting applied.

    i suspect it has something to do with an issue called Margin Collapsing, which i've read up about but cant figure out how to fix in this circumstance. i tried a border, i tried padding, but nothing worked.

    please advise how to fix. thanks!
    This issue has nothing to do with margin collapsing; the problem is a result of the style rule h3 { display: inline; ... } in the file style.css.

    Per CSS2.1 (http://www.w3.org/Style/css2-updates...gin-properties) regarding the margin property and margin-* properties: "These properties apply to all elements, but vertical margins will not have any effect on non-replaced inline elements."
    For every complex problem, there is an answer that is clear, simple, and wrong.

  • #4
    Regular Coder
    Join Date
    Aug 2009
    Posts
    407
    Thanks
    119
    Thanked 0 Times in 0 Posts
    thanks arbitrator. but when i remove the display:inline from the h3, then the text drops to below the bottom of the picture rather than wrapping around it, which is what i want it to do.

    that being said, how do i solve this mess?

  • #5
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Have you tried just wrapping the <h3></h3> tags within a paragraph tag? I did this and it seemed to work. Not sure if thats the best solution.

    Well I think you still have display: inline on your <h3> tag, so if you remove that style, not sure the <p> tag will work the same.
    Last edited by teedoff; 10-26-2010 at 02:32 PM.

  • #6
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    Once you've removed the display:inline, the h3 is dropping because of this:

    Code:
    h1, h2, h3, h4, h5, h6 {
    clear:both;
    font-weight:normal;
    }
    Remove the clear:both and the text will sit alongside the image.

  • #7
    Regular Coder
    Join Date
    Aug 2009
    Posts
    407
    Thanks
    119
    Thanked 0 Times in 0 Posts
    that worked. thanks!

  • #8
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by SB65 View Post
    Once you've removed the display:inline, the h3 is dropping because of this:

    Code:
    h1, h2, h3, h4, h5, h6 {
    clear:both;
    font-weight:normal;
    }
    Remove the clear:both and the text will sit alongside the image.
    Dang I didnt see that! lol...yes that would cause it to drop.


  •  

    Posting Permissions

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