Spaces top and bottom I can't get rid of

Spaces top and bottom I can't get rid of

by Miriam Laidlaw -
Number of replies: 16
Picture of Plugin developers

Hi folks,

Been absent a while, I know. But I'm back now. :D

I know I've done this before with other themes (and I can't find the code in them, and my wiki where I was keeping all these gems was hacked and is now down), but I just can't for the life of me work it out right now.

I'm using Moodle 2.4, but it applies with any of my themes in Moodle 2 that are based just on Base.

At the top of my page (above body) I have a gap that, no matter how much I Firebug it, I can't identify its origin. I have margin: 0 and padding: 0 in all conceivable locations.

Gap at top

Then at the bottom of the page (below html) I have another gap. The body part of the page stops just above the footer, but the html part encompases the footer. However, below the footer / html part a gap that I can't get rid of. Again, I have margin: 0 and padding: 0 in all places anywhere near there.

gap at bottom

I know once I am told I'll kick myself. big grin

Average of ratings: -
In reply to Miriam Laidlaw

Re: Spaces top and bottom I can't get rid of

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

First you need to reset with...

html, body {margin: 0; padding: 0}

Usually this does the job if you donlt have abackground color.

If you set

body {background: #ddd } you will get a gap.

However it you add html, to the body CSS like so...

html, body { background-color; #ddd }

the gap should go. smile

Welcome back! cia

Average of ratings: -
In reply to Mary Evans

Re: Spaces top and bottom I can't get rid of

by Miriam Laidlaw -
Picture of Plugin developers

Ok, I've done

html, body {
margin: 0;
padding: 0;
background-color: transparent;
}

and that has fixed the gap at the top oops no it hasn't fixed the gap at the top, but I still have one at the bottom.

Average of ratings: -
In reply to Miriam Laidlaw

Re: Spaces top and bottom I can't get rid of

by David Scotson -
The built in developer tools for Firefox and Chrome should display a little diagram that tells you the padding, borders and margin on the currently selected item (as well as it's dimensions), that's often handy for tracking down stray margins. Then, once you've found which part of the page has the extra padding/margin the list above it will also tell you where that rule is coming from.

Are you only having this problem on "short" pages? Sometimes you need to set height to 100% on html and body if the content doesn't take up enough space.

edit: just re-read one of your earlier posts: "The body part of the page stops just above the footer, but the html part encompases the footer. "

The footer (tag or div) should really be inside the body tag so you may have an extra open, or missing close, tag somewhere.
Attachment inspector.png
Average of ratings: -
In reply to David Scotson

Re: Spaces top and bottom I can't get rid of

by Miriam Laidlaw -
Picture of Plugin developers

Sorry, I should have clarified.

The body tag in the code does indeed encompass the footer, but when I use Firebug to inspect the page and I hover over the body part, the highlight stops above the footer for some reason.

It's not just my themes. I find this irritating gap in most themes, it's just that the background colours (like with Aerie) match and so hide the fact that those gaps are there.

I may not be making much sense. Perhaps I should do a quick screencast lol.

Average of ratings: -
In reply to Miriam Laidlaw

Re: Spaces top and bottom I can't get rid of

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Can you send me the theme you are working on so I can test it for you? It may be something as David suggests, which, when viewing your own code, you can miss.

Also, you could try adding <div class="clearfix"></div> just after the the footer </div> before the last closing div for the page..

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: Spaces top and bottom I can't get rid of

by Miriam Laidlaw -
Picture of Plugin developers

It happens on pretty much all my themes.

You can view it on Aerie Lite, which works in Moodle 2.4, and is available for download https://github.com/kihitara/aerie_lite

Average of ratings: -
In reply to Miriam Laidlaw

Re: Spaces top and bottom I can't get rid of

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi,

Just found the problem...I think!

You need to tag the HTML to the body so they are both styled the same...

html, body {
    color: #000000;
    padding: 0;
    margin: 0;
    background-color: setting:pagebackgroundcolor ;
}

Font's need to be set in #page NOT html, body

#page { font-family: Helvetica, "Arial", Tahoma, sans-serif;}
HTH
Mary
Average of ratings: -
In reply to Mary Evans

Re: Spaces top and bottom I can't get rid of

by Miriam Laidlaw -
Picture of Plugin developers

Just did exactly that, and still have the space above the body I can't get rid of, and the space below the footer.

My CSS:

Average of ratings: -
In reply to Miriam Laidlaw

This forum post has been removed

The content of this forum post has been removed and can no longer be accessed.
In reply to Miriam Laidlaw

Re: Spaces top and bottom I can't get rid of

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi Miriam,

First of all get rid of all the clearfix class attributes you have added to wrapper/page-header and page-footer. Instead add <div class="clearfix"></div> just before the closing </div> tag for both wrapper and page.

You DO NOT need overflow: hidden in #page as that can cause other problems.

With these new changes inplace and the html,body combinded CSS as mentioned earlier this clears the gap for you if you add a solid color.

Attached is the revised version of general.php.

HTH

Mary

PS I got a Error php warning about the mbcredits I think I have fixed that too added a $hasmbcredits at the top of general.php

Average of ratings: -
In reply to Mary Evans

Re: Spaces top and bottom I can't get rid of

by Miriam Laidlaw -
Picture of Plugin developers

The clearfix attributes were not added by me, but were there from whichever general.php file I originally copied this one from before I messed with it. smile Never occurred to me that they would be causing issues.

Where have I got overflow: hidden in #page? Never mind, I see that was a response to another suggestion...

I replaced the general.php with your revised one, Mary. Thanks for that. I still have the problem, but I notice when I switch to Binarius that I don't see it there... so I might see how my stuff differs to that theme.

Time for me to head home from work now. Will keep looking at this tonight.

Average of ratings: -
In reply to Miriam Laidlaw

Re: Spaces top and bottom I can't get rid of

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

I think you need to clear the cache as I am gettinga perfet page in aerie_lite.

If you want to see some strange behaviour for html, body, page take canvas theme for a spin in Firebug!

Average of ratings: -
In reply to Miriam Laidlaw

Re: Spaces top and bottom I can't get rid of

by David Scotson -
The reason (I think) for your footer is escaping the body tag, is that it is floated, which lifts it up out of the containing element, which can cause the container element to collapse smaller (sometimes disappearing completely if it has no non-foating content).

The page appears as if you have 15px of margin-bottom on the body tag, but that margin doesn't show up in the Firefox tools. Very strange. The same thing shows up in Chrome tools, it says the html tag is 1 pixels higher than the body tag, but there's no margins/padding. And on Firefox it shows at the bottom, on Chrome at the top. Very, very strange.

But switching to other themes or web pages entirely don't show this problem. Is there anything in your theme thats set to 15 (or possibly 16) px high? That might give us more clues.
Average of ratings: -
In reply to David Scotson

This forum post has been removed

The content of this forum post has been removed and can no longer be accessed.
In reply to Deleted user

Re: Spaces top and bottom I can't get rid of

by David Scotson -
Looking at Binarius (but I think it generally applies to standard Moodle Themes) it seems like there's an interaction between #page and the #wrapper that it contains. #wrapper has fairly large margins set on it 25px top and bottom, which extend beyond the outer #page and body and pushes everything down, leaving a gap at the top that shows through to the html element at the bottom.

If you change the overflow setting it can collapse this extra margin. "hidden", somewhat counter-intuitively, is often used to see the extra background content that would otherwise be cut off by weirdness in the CSS floats and margins.

If the margins on #wrapper were instead shifted to be similar sized padding on #page the problem goes away (you might need to take away the width:100%) but there may a string of oddness that led to this choice in the first place, so I wouldn't rush to "fix" this if you can cover it up by setting the HTML color appropriately.




Average of ratings: -
In reply to David Scotson

Re: Spaces top and bottom I can't get rid of

by Miriam Laidlaw -
Picture of Plugin developers

I've trawled for 15px margin / padding / height properties, and can't find anything.

When I create a brand new theme starting only from Base, these gaps are there. So is there something in Base I'm not managing to override?

Average of ratings: -