SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Guru htown's Avatar
    Join Date
    Mar 2005
    Posts
    676
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Why is H1 margin pusing down content div?

    In FF the H1 that has a margin-top set to 20px has no effect on the top H1, it works throughout the rest of the document just fine.

    In IE6 it pushes seems to push down the whole content div 20px instead of putting a space between the top of the content div and the H1 tag like you think it would.

    In IE7 I have no idea what is going on. Half the content is just gone. It seems to be ignoring the clear:both set on the CONTENT div.

    What the heck do I have so messed up. I am really struggling with this and it seems to be so simple.

    http://smartcar.websitewelcome.com/~canary/ (full version)

    http://smartcar.websitewelcome.com/~canary/testing.html (Scaled down but the IE7 problem does not show up here)

    Thanks,
    Houston
    Houston Brown
    Split Light Designs
    Bringing your ideas to light.

  2. #2
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We'll start with FF. It's looking that way because #nav's content is overflowing (because of the silly height:26px and because of its floated descendants that are only cleared outside of #nav) and #nav has floated descendants. #content has clear:both, so it's top-margin is extending enough for it to clear the floats. The first <h1>'s (Why do you have more than one <h1>?) top-margin is collapsing with #content's.

    IE6 handles height like it should handle min-height (which it doesn't support), also since specifying a height on #nav triggers hasLayout it's containing its floated children, so it's growing to accommodate all of its descendants. Since #content doesn't have hasLayout the <h1>'s top margin is collapsing, but because the floats don't need to be cleared, it's pushing down #content.

    Lastly IE7 is messed up, because it doesn't handle height like min-height the way IE6 does, yet it still doesn't seem to have overflow correctly implemented -- it's better than how IE6 does it, but it still differs from other browsers sometimes. So #nav is overflowing on top of #content, without pushing it down, like it should.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  3. #3
    SitePoint Guru htown's Avatar
    Join Date
    Mar 2005
    Posts
    676
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz View Post
    We'll start with FF. It's looking that way because #nav's content is overflowing (because of the silly height:26px and because of its floated descendants that are only cleared outside of #nav) and #nav has floated descendants. #content has clear:both, so it's top-margin is extending enough for it to clear the floats.
    For testing purposes I put a border at the bottom of both #nav and #nav li and I did not see where any content was overflowing and pushing down #content. In an effort to keep this as simple as possible, I have stripped down the code to it's bare essentials and I am still seeing a problem with a gap between #nav and #content. This is driving me crazy. It is doing this in FF and the IE's. (Of course the IE's have a little extra gift of a three pixel gap at the top of #nav too, this would be another question.)
    Here is a link to the basics

    Quote Originally Posted by Kravvitz View Post
    The first <h1>'s (Why do you have more than one <h1>?) top-margin is collapsing with #content's.
    Well, perhaps I am using the H tags incorectly but it was my understanding that they should be used as you would use an outline and in an outline you could have several headings on the same level, unless you are saying that the H1 ag should be used, in this case, as the Page Header. Since there is only one page, H1 should only exist once. AM I following you.?

    Quote Originally Posted by Kravvitz View Post
    IE6 handles height like it should handle min-height (which it doesn't support), also since specifying a height on #nav triggers hasLayout it's containing its floated children, so it's growing to accommodate all of its descendants. Since #content doesn't have hasLayout the <h1>'s top margin is collapsing, but because the floats don't need to be cleared, it's pushing down #content.
    I am not following you here at all, what is hasLayout?

    Quote Originally Posted by Kravvitz View Post
    Lastly IE7 is messed up, because it doesn't handle height like min-height the way IE6 does, yet it still doesn't seem to have overflow correctly implemented -- it's better than how IE6 does it, but it still differs from other browsers sometimes. So #nav is overflowing on top of #content, without pushing it down, like it should.
    So is there just no way to get what I am trying to do towork with all three browsers? I am trying to take this in a little at a time, perhaps I will eventually get this to work. If I would have gone with javascript rollovers I would have been done a long time ago. It is hard to get that off my mind as I get more and more frustrated, but I am determined to get this to work now.

    Thanks for all your help Kravvitz, it is much appreciated.
    Houston Brown
    Split Light Designs
    Bringing your ideas to light.

  4. #4
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't see the red border in the original page, even though I see it's in the source code, in FF, IE7, or IE6. I do see it after I make changes to the page with a debugging tool.

    On the simplified page, I don't see a gap in FF, IE7, or IE6. You made major changes that change the behavior. You removed the floats and the height property from #nav. You also removed the <h1> and don't even have a <p> with a top margin there.

    Quote Originally Posted by htown
    Since there is only one page, H1 should only exist once. AM I following you.?
    Yeah, that's the predominant thought about it right now.
    Quote Originally Posted by htown
    what is hasLayout?
    Sorry, I thought you had been around long enough to have read about it. These explain what hasLayout is. (I discourage the use of the underscore hack, which the first one recommends though.)
    http://www.satzansatz.de/cssd/onhavinglayout.html
    On Having "Layout"
    "HasLayout" Overview
    A TripSwitch? - set hasLayout to true without a dimension
    IE/Win: inline-block and hasLayout
    Clarification of inline-block and hasLayout

    Quote Originally Posted by htown
    If I would have gone with javascript rollovers I would have been done a long time ago. It is hard to get that off my mind as I get more and more frustrated, but I am determined to get this to work now.
    Whether you use CSS rollovers or JavaScript rollovers has nothing to do with this.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  5. #5
    SitePoint Guru htown's Avatar
    Join Date
    Mar 2005
    Posts
    676
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kravvitz View Post
    On the simplified page, I don't see a gap in FF, IE7, or IE6. You made major changes that change the behavior. You removed the floats and the height property from #nav. You also removed the <h1> and don't even have a <p> with a top margin there.
    Lets forget about the original for now. I am trying to narrow this down to both understand why it is happening and to fix this problem.

    My apologies, I forgot to upload the correct page. If you go to http://smartcar.websitewelcome.com/~canary/testing.html now you will see. The gap only shows up when the H1 tag is in there. Makes no sense to me.
    Houston Brown
    Split Light Designs
    Bringing your ideas to light.

  6. #6
    SitePoint Guru htown's Avatar
    Join Date
    Mar 2005
    Posts
    676
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Take a look at this. If I put a border around CONTENT it works fine. How do you explain that?

    http://70.87.62.162/~canary/testing2.html
    Houston Brown
    Split Light Designs
    Bringing your ideas to light.

  7. #7
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In the second example in testing2.html the border is between the margins, thus preventing them from collapsing.

    In testing.html I don't see the gap, but that's because of rule like this:
    Code:
    * {
      margin: 0;
      padding: 0;
    }
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  8. #8
    SitePoint Guru htown's Avatar
    Join Date
    Mar 2005
    Posts
    676
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am sure you are growing tired of all of this so if I may, perhaps we need to get back to the original problem at hand. I have made so many changes I am loosing track but what I have now seems to work just like "I" would expect it too, but only in IE 7, in FF, the H1 goes strait to the top, no gap and IE6 leaves a big gap. You tried to explaining this to me in the the quote below but I am just not following you. Perhaps you wouldn't mind explaining it a bit differantly or just tell me the css I need to change to make it work correctly.

    I definately do not understand why the border makes it work.

    Quote Originally Posted by Kravvitz View Post
    We'll start with FF. It's looking that way because #nav's content is overflowing (because of the silly height:26px and because of its floated descendants that are only cleared outside of #nav) and #nav has floated descendants. #content has clear:both, so it's top-margin is extending enough for it to clear the floats. The first <h1>'s (Why do you have more than one <h1>?) top-margin is collapsing with #content's.
    Many thanks,
    Houston
    Houston Brown
    Split Light Designs
    Bringing your ideas to light.

  9. #9
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Did you read No Margin for Error?
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  10. #10
    SitePoint Guru htown's Avatar
    Join Date
    Mar 2005
    Posts
    676
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Holly margins batman, did that clear things up. Thanks for that very helpful link. So all I needed to do to fix this was to put a padding of 1px to separate the margins so they would not collapse. How frustrating is that.

    Thanks again Kravvitz.

    Muchos Gracias
    Houston Brown
    Split Light Designs
    Bringing your ideas to light.

  11. #11
    CSS & JS/DOM Adept bronze trophy
    Join Date
    Mar 2005
    Location
    USA
    Posts
    5,482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    *chuckles* You're welcome

    The best thing about collapsing margins is that they are easy to prevent from collapsing. The trouble is understanding that they can do that and how to prevent it when you don't want them to.
    We miss you, Dan Schulz.
    Learn CSS. | X/HTML Validator | CSS validator
    Dynamic Site Solutions
    Code for Firefox, Chrome, Safari, & Opera, then add fixes for IE, not vice versa.

  12. #12
    SitePoint Guru htown's Avatar
    Join Date
    Mar 2005
    Posts
    676
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Amen Brother.
    Houston Brown
    Split Light Designs
    Bringing your ideas to light.


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
  •