Grow your CSS skills. Land your dream job.

[Solved] Unwanted top margin in Firefox

  • # January 25, 2013 at 9:59 am

    A margin is appearing between my html tag and body tag but only in Firefox.

    I have declared *{margin:0; padding:0} in the stylesheet and using Firefox’s developer tool shows that there is no margin or padding or margin calculated, however this problem persists.

    I have found the apparent cause, but I’m uncertain as to the reason.

    I have a nested div within a container, and this div has a margin:20px 0px;

    When this margin is set, it also creates a 20px margin between html tag and body tag and likewise if removed.
    However, adding padding to the adjacent sibling of body tag (a nav tag) removes this unwanted margin.

    Why is this?

    I realise the obvious solution is to either add padding to the nav or remove the margin from the nested div, but this would be papering over the cracks and doesn’t deal with the issue at hand, it also messes with how my layout should look

    # January 25, 2013 at 10:07 am

    We’d need to see a link to be sure but IIRC it’s related to the top margin you have set not having (in effect) anything to push against so it pushes itself away.

    The simplest method, as you say, is to add padding but since you don’t want to do that, give the container a top border of 1px solid transparent or whatever color you want.

    That should do it and it’s practically invisible.

    # January 25, 2013 at 10:10 am

    I’ve checked with IE9 and current version of Safari, Opera and Chrome and all ignore the border.

    I knew there’d be a logical reason behind it, especially with it being the case in Firefox, but couldn’t think what it could possibly be.

    # January 25, 2013 at 10:14 am

    Sorry, was editing my reply.

    Ideally a link would be best option to make sure my suspicions are correct.

    # January 25, 2013 at 10:16 am

    I feel like I’m hacking around adding an invisible border or thin padding, forgive me.

    Is there a ‘clean’ solution to have:

    - 0 margin between top of the page and div #1
    - 20px margin between div #2 and div #1
    - 20px margin between div #2 and div #3

    (Thank you for the help, by the way)

    # January 25, 2013 at 10:28 am

    Unfortunately, I don’t have FF on this laptop but I’m sure others here can help you.

    # January 25, 2013 at 10:31 am

    Thanks for the help up to now…

    # January 25, 2013 at 12:02 pm

    I’m not sure why or how but this wil fix it (for me Aurora 16.0a2)

    add:

    nav#top{
    display:inline-block;
    width:100%;
    }

    Maby someone who really understands it can explain why.

    # January 25, 2013 at 3:51 pm

    I can somewhat explain why, but I still haven’t figured out why it’s needed. The display: inline-block changes the block formatting context of nav. The same results are true if you use display: table, or don’t change the display at all, but add overflow:hidden to #top (all of which change the BFC). Normally a margin would be protruding out the top of nav, and then #container, and again body; but there’s no top margins – I can’t find why it’s happening. I have seen this before however, and I just used the overflow: hidden to correct it.

    # January 28, 2013 at 5:02 am

    Thanks for the suggestions

    # January 28, 2013 at 10:52 am

    As said, both display:inline-block and overflow:hidden will fix this, however overflow:hidden will cause problems if using CSS for a drop-down menu.

    # January 28, 2013 at 10:58 am

    You can put the overflow: hidden; on the #container and not have it affect the dropdown.

    # January 28, 2013 at 11:56 am

    Okay, thanks for the help

    # January 30, 2014 at 4:05 am

    S_Honderdos answer works for me!

    Thanks!!

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".