My CSS has a strange margin or perhaps padding at the top of my site that I cannot seem to control. It doesn’t appear if I view via my Android device but is always there via a desktop browser.
I have put together some screen-shots (hoping it may help). Here’s the site as it looks as of this post:
The margin is about the header “Into Blackwood” to the top right. This is the basic CSS for that area:
If I highlight the style that controls the body tag I can see it is most likely the culprit:
The classes ‘home’ & ‘blog’ that dictate the style of the body tag (along with the style definitions for the body tag itself) cannot be found for me in the style sheet or the do not seem to have any relevant padding / margin info. Am I wrong? And if so what needs changing?
Its the 45px margin-top on #container collapsing onto #header because there is nothing between them and thus they collapse. #header contains only floats and therefore it thinks it has no content which allows the margin to collpase.
You need to clear the floats:
e.g.
#header{overflow:hidden}
Or you could add padding to #header that should also stop the margin-collapse but won’t actually contain the floats.
Please note that I corrected a typo in my original rule. It should have said this:
#header{overflow:hidden}
overflow other than visible will cause an element to contain its floated children. IE6 and 7 need haslayout to acheive the same effect which can be done by supplying a dimension or more easily (but invalid) with the proprietary zoom:1.0; property rule.
