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 3 of 3
  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    40
    Thanks
    4
    Thanked 1 Time in 1 Post

    "inner" margin causes gap, WHY?

    I prepared this page to illustrate a problem: http://www.variablehtml.com/gap.htm , then I discovered how to fix the problem, but I’m still wondering WHY?

    The gap is caused by the top margin of the buttons that are inside the division with the lower graphic background!
    LI.button {
    margin-left: 5px;
    MARGIN-TOP: 3px; MARGIN-BOTTOM: 3px; TEXT-ALIGN: center
    }

    When I change the top margin to 0px, everything lines up properly.

    If the button exists inside the division, why is the entire division moved down by the top margin of the button?

    PS:

    I’m in the process of converting my table designed layouts to pure CSS positioning. Along the way I’m finding problems and decided to create example pages to show everyone the issues. Would you rather I do this with code blocks? The blocks might be extremely large. The pages I create are going to be self contained, except for the graphics, which will have full links so you can display source and save to your own drive.
    Last edited by PapaGeek; 07-30-2012 at 12:15 PM.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,955
    Thanks
    9
    Thanked 726 Times in 720 Posts
    It moves down to preserve the 3px margin assigned to the li element.

    There's a few solutions:

    - Apply 3px padding-top to .wnav
    - Apply 3px padding-top to ul.button
    - Remove the top margin on the li entirely
    - Set the top margin on the first child li to 0:

    Code:
    ul.button li:first-child {
        margin-top: 0;
    }
    EDIT: I'd recommend using lower case throughout your css, incidentally.

  • Users who have thanked SB65 for this post:

    PapaGeek (07-30-2012)

  • #3
    New Coder
    Join Date
    Jul 2011
    Posts
    40
    Thanks
    4
    Thanked 1 Time in 1 Post
    I agree with the lower case, a lot of this was created long ago with an older program "Hot Metal Pro" which put all of its coding in upper case.

    Need to take the time to lower case everything.

    Thanks for the first-child hint. That will come in handy as I move forward.


  •  

    Posting Permissions

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