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 6 of 6

Thread: CSS issue

  1. #1
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS issue

    http://avarice.oneeightseven.org/work/SAN/test-new.html

    Why is it that margin-bottom: 10px in the #top container also adds a 10px margin to the top when it shouldn't? This doesn't make sense.

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    It has to do with Gecko's method of collapsing margins. Put a border around #top and you'll see what I mean.

    By the way, please use a clearer title when posting a thread, per our Rules and Posting Guidelines.

  • #3
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by rmedek View Post
    It has to do with Gecko's method of collapsing margins. Put a border around #top and you'll see what I mean.

    By the way, please use a clearer title when posting a thread, per our Rules and Posting Guidelines.
    While reading up on this it makes sense, but what doesn't make sense is that I've used code like before without this problem. 2 or more floated div containers within another container and using margin-bottom with no problems at all.

  • #4
    Senior Coder koyama's Avatar
    Join Date
    Dec 2006
    Location
    Copenhagen, Denmark
    Posts
    1,246
    Thanks
    1
    Thanked 5 Times in 5 Posts
    Actually, I think it rather has to do with the different float models of IE and FF. Try to give your #frame some background color and you will see what is going on.

    When a div has explicitly set width IE incorrectly increases the height to contain floats. FF correctly lets floats stick out (partially or even completely) from the bottom.

    Thus the space at the top in FF is actually the bottom margin of #top.

  • #5
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    This seems to solve my problem when adding it to the #top div:
    Code:
    overflow: auto;

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You should also look into clearing your floats. Thats the main cause of your problem. http://www.positioniseverything.net/easyclearing.html
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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