Mystery white space Options

[danieljksn]

I feel like I'm losing my mind!

At the bottom of this page, under the copyright notice, there's a white space. I can't work out its origins - I've looked through the document thoroughly and it appears to be coming from the ether. Of course I'm missing something, but what?!

https://julesmagazine.com/lab2/

This post has been edited by danieljksn: Oct 16 2020, 12:40 PM

[pandy]

I think it's the background color of HTML. Body ends after the copyright. What color do you want that bit to be? The greenish color or black?

You have some trickery going on with :before and :after that also seems to affect things somehow. I haven't read the whole style sheet, so not totally clear about what's going on.

[danieljksn]

I think it's the background color of HTML. Body ends after the copyright. What color do you want that bit to be? The greenish color or black?

You have some trickery going on with :before and :after that also seems to affect things somehow. I haven't read the whole style sheet, so not totally clear about what's going on.

Greenish, yes. Ideally I would like a sticky border around the page without any trickery, though I am willing to drop it and replace with a static one if it's causing problems. HTML really isn't my area, I'm having to muddle through out of necessity.

[pandy]

How do you mean, sticky border? Should the bottom border be at the bottom of the page (after the copyright) or at the bottom of the window?

[danieljksn]

How do you mean, sticky border? Should the bottom border be at the bottom of the page (after the copyright) or at the bottom of the window?

At the bottom of the window. By sticky border I mean that it follows the user as they scroll, so it's always present.

[pandy]

OK, that actually makes it easier. I'd fake the top and bottom borders with two black DIV's positioned fixed.


See how this mockup looks to you. If the content is higher than the window the top and bottom borders will stay as the window is scrolled. If the content is shorter, the bottom border will be at the bottom of the window.

CODE

html               { background: red;
                     border: 15px solid black; border-top: none; border-bottom: none;
                     min-height: 100% }

#foo,#bar          { height: 15px; width: 100%;
                     background: black;
                     position: fixed }
#foo               { bottom: 0; left: 0 }
#bar               { top: 0; left: 0 }

body               { margin-top: 15px; margin-bottom: 15px }

HTML

aaaaa<br>
bbbbb<br>
ccccc<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
blah<br>
xxxxx<br>
yyyyy<br>
zzzzz<br>




<div id="foo"></div>
<div id="bar"></div>

The top and bottom margin on BODY is needed or the text would disappear under the positioned DIVs. You can use the margin with a wrapper DIV as well, as long as you use them with something that contains all content it will work.