Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Unwanted top margin in Firefox

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #42246
    darrylm
    Member

    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

    #122278
    Paulie_D
    Moderator

    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.

    #122279
    darrylm
    Member

    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.

    #122280
    Paulie_D
    Moderator

    Sorry, was editing my reply.

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

    #122281
    darrylm
    Member

    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)

    #122283
    darrylm
    Member
    #122284
    Paulie_D
    Moderator

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

    #122285
    darrylm
    Member

    Thanks for the help up to now…

    #122297
    S_Honderdos
    Member

    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.

    #122325
    wolfcry911
    Participant

    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.

    #122536
    darrylm
    Member

    Thanks for the suggestions

    #122584
    darrylm
    Member

    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.

    #122585
    wolfcry911
    Participant

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

    #122594
    darrylm
    Member

    Okay, thanks for the help

    #161392
    ignaciolflores
    Participant

    S_Honderdos answer works for me!

    Thanks!!

Viewing 15 posts - 1 through 15 (of 15 total)
  • The forum ‘CSS’ is closed to new topics and replies.