SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Probably very simple, but I can't see it

    A friend asked me to look at this page
    http://myweb.tiscali.co.uk/simonrive...lvard/tlt.html

    In IE7, the top margins applied to each div result in the second layer being 54px down from the top of the first layer and the third layer being 27px down from the top of the second one.

    In Firefox, the second layer's margin is ignored and it is up against the top of the first layer. But the third layer is still 27px down from the second one.

    Now the fun bit. Increase the top margin on the second layer by, say, 100px, and in FF, the first layer (and the ones inside it) drops by another 100px...

    Explanations?

    Solution to have it look the same in FF as in IE7?

  2. #2
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The display you see in Firefox is the correct implementation of vertical margin collapse, which IE gets wrong completely. If you are spacing an element within a container, the most stable way is to use padding on the container rather than margins on the element. Keep margin for spacing elements on the same "level". Also remember that any paddings applied to a container will need to be subtracted from its height. The gap you see under the inner image in IE is due to the paragraph height being added to by the padding set in different units - assign the padding in pixels and account for this measurement in the width and height.
    Code:
    body
    {
    margin: 0;
    padding: 0;
    text-align: center;
    width: 100%;
    }
    .wrap
    {
    width: 675px;
    margin: auto;
    padding: 100px 0 0;
    position: relative;
    }
    .firstlayer
    {
    background-image: url('450berries1.jpg');
    width: 675px;
    height: 273px;
    margin: 0 auto;
    position: relative;
    padding: 54px 0 0;
    }
    .secondlayer
    {
    background-image: url('450berries2.jpg');
    width: 450px;
    height: 191px;
    border:  solid 2px black;
    margin: 0 auto;
    padding: 27px 0 0;
    }
    .thirdlayer
    {
    width: 330px;
    height: 164px;
    border: solid 2px black;
    background: white;
    margin: 0 auto;
    }
    .thirdlayer img
    {
    float: left;
    }
    .thirdlayer p
    {
    display: inline;
    text-align: left;
    float: right;
    width: 130px;
    height: 144px;
    padding: 10px;
    }

  3. #3
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that - I'll pass on the advice.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    To explain a little further about margin collapse

    Vertical adjacent margins will collapse between adjacent blocks and even with their children. This is the way that the specs define it and the way that most browsers will apply it. IE (including IE7) will also collapse the margins in the same way if the elements concerned do not have "a layout" (see faq on haslayout).

    However most of the times designers are unaware of this because the elements concerned often have widths (which sets "haslayout" to be true) and they think that IE's non-collapsing behavior is the correct one.

    Incidentally this is the same behaviour we get from other browsers if overflow with a value other than visible is used. When overflow:auto is added to the element then margin collapse does not take place.

    Of course, adding overflow is not the best course of action and simply adding a padding or border will stop the margin collapse altogether.

    Here is a short demo:

    http://www.pmob.co.uk/temp/collapsing-margin-demo.htm

  5. #5
    SitePoint Zealot
    Join Date
    Sep 2007
    Location
    Wiltshire, UK.
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you gentlemen, most informative, but I seem to have a definition problem here, which margins are the horizontal ones and which the vertical? I have been assuming that vertical margins run vertically and horizontal margins run horizontally, but the demo posted by Paul O'B suggests that vertical margins are those above and below and horizontal ones are to the left and right.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    I have been assuming that vertical margins run vertically and horizontal margins run horizontally, but the demo posted by Paul O'B suggests that vertical margins are those above and below and horizontal ones are to the left and right.
    Aren't you saying the same thing in both of those statements?

    Vertical margins are those margins that will affect the vertical (up and down) alignment of an element.

    Horizontal margins will affect the horizontal position of the element (e.g. move it left or right depending on the values set)

    I don't think I see what the difference is from what you were saying

  7. #7
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    He's thinking in terms of lines (kinda like invisible borders) rather than the direction of the margin, so a margin that runs from right to left appears to be horizontal cos that's the orientation of the line from which the margins emerge.

  8. #8
    SitePoint Zealot
    Join Date
    Sep 2007
    Location
    Wiltshire, UK.
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Got it in one Tyssen. I see now that it's a matter of from where you are looking at the situation, you lot see it as a technical point and how the setting affects things like alignment, I see (saw) it from an end product which, as Tyssen suggested, involves the direction in which the 'lines' run. Now, am I the only idiot or is this one of the reasons why margin collapse is so difficult to get ones head round?

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,276
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I've never seen it any other way and margins have always been one of the most intuitive properties of CSS to me (excluding margin collapse which is not really that complicated once you see the demo) .


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
  •