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
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.
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.
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
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.
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.
Sorry, was editing my reply.
Ideally a link would be best option to make sure my suspicions are correct.
I feel like I'm hacking around adding an invisible border or thin padding, forgive me.
Is there a 'clean' solution to have:
(Thank you for the help, by the way)
http://npsolutions.co.uk/test/homepage-2.html
Unfortunately, I don't have FF on this laptop but I'm sure others here can help you.
Thanks for the help up to now...
I'm not sure why or how but this wil fix it (for me Aurora 16.0a2)
add:
Maby someone who really understands it can explain why.
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.
Thanks for the suggestions
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.
You can put the overflow: hidden; on the #container and not have it affect the dropdown.
Okay, thanks for the help