unneeded space below my footer

[muse]

Hello there,

Eventhough known with CSS tricks website, I am new on this forum. I am not new to webdesign and its language/code but I consider myself still a beginner. I have been struggling now for a week if not longer with a problem concerning unwanted space below my footer. I read so many topics on it here and else that made my head almost ‘explode’ but none did the trick for me.
Not sure I messed up my positioning or else, but seeing margins set mostly to 0 auto I can’t find the problem there. I made a simplified example with codepen of my page. Stripped all things that I knew were not the issue.

Hopefully this link will work:

code: http://codepen.io/pen/8223/6
full view: http://codepen.io/anon/full/8223/6

What did I already try:
-enlarging footer hoping that will clear bottom space…you need to try the easiest first.. right? ;-)
-messing with positioning and floating…but doing such I can place footer on bottom (pos: relative top 0) but then above the footer, between slideholder and footer, same unwanted gap appears. Note that my html body is set to #page5 as I had to traget my footer differently from page 1.
-I used even a script for IE that would remove the unwanted space below but that….. of course….worked only in IE :$…i was happy for a moment though.
-I even stripped my whole CSS and pasted it back one by one….when i removed slideholder the footer jumped up leaving even moreeeee space below…sighs.
-I tried negative margins…nothing….negative positionings…nothing…………..am I being punked with some codebug?
-tried to set body height to auto…then 100%….out of despair I even set html to 100%…..still clueless

I am sure that for the pro’s under you, I may have made some stupid mistake that I am overlooking….so I truly hope one of you can find it as I am stuck. This footer problem I also had on my first page as it was between slideholder and bottom….I hope to learn from my error but first I need to know what it is.

Thank you in advance for all the help,
Not so (a)Muse(d)

[amoss]

This work for you?
http://codepen.io/anon/full/8260/2
As you did’nt state what version of IE, this will work for IE9.

[muse]

Hello Amoss, thank you very much for your effort, but I still see the space underneath so my problem is nto solved=/. I myself use mostly Opera so I see it there but to be more precise about what I want:

-header….grey part where slider comes….footer. I do not want any space below the footer, neither between slideholder and footer…last part I managed, but not the first part (no space below footer). I want this to work in newest browsers like IE9, Safari, Opera, FF, chrome…

kind regards,
Muse

[Paulie_D]

There’s not much you can do without using a ‘sticky’ footer technique.

However, if you are worried about people being able to ‘see’ the extra space, just change the colour of the body to the same as the footer and the footer just blends in. http://codepen.io/pen/8470/1

[wolfcry911]

http://codepen.io/pen/8471/1

[Paulie_D]

@wolfcry911 Nice job, I forked the previous version…unfortunately, i didn’t have time to clean up the css. :)

[muse]

Thank you all for your feedback. I truly appreciate it. My own feedback is definitely longer then yours and am sorry for this, but I want to react clear to all your awesome feedback.

@Paulie: what I do not like about sticky footers….is that you always see them….I thought about that option but its not my favourite. The idea about body is an option and one I tried myself just from design point of view am not very happy about it as my other pages have all same height footers… and this one would differ too much. Buttttt if I really won’t find any other solution then I definitely will choose that.

@Wolfcry911: thank you very much for cleaning out my css! I learned from that.
About that top: 400 that you say I definitely do not need;

There is that thing again with the footer….I did that bcs the stupid footer did not go where it had to go on my other pages=/…sighs……I removed now that top 400 but now footer is like in the middle of my page, overlapping all my content and I cant get that darn footer on bottom of my page. Asking politely did not work;-)

---

A.
About the #page5 #footer with top: -40px

well….that was the only way to make it stick to the grey part otherwise I keep having space above and under footer.. As originally the grey part is a png with shadow I kept having space between there and footer…so to move that footer underneath the grey part I had to choose that weird parameter so it slides under.

Also I do not see what you changed with code besides cleaning out my css which I am majorly grateful for. As to me the problem still is visible…space under the footer I see white on full screen.

B.
So after following your advices, which I am certain they were good, I now have two problems: on page 1-3 my footer is overlapping my content (as I have there written content between slideholder and footer. Remarkably when I choose that weird top: 400px; footer shows good on bottom of all content…besides in IE..IE9 and FF grrr.. As I said in my starting discussion…I used once a script for this issue but then it showed good in IE but not in all other browsers…so I hit the delete button:).

On page 4 (which I wrote this discussion thread for) and page 5 which has same setup….I stil keep that space underneath the footer…and above the footer, unless I use top -40 which will slide it a bit under the slideholder (=grey part)

To be clear: all my pages have the same set up. The only difference between 1-3 and 4-5 is that the 1-3 has a div between slideholder and footer with written content. Also page 1-3 has two absolute positioned divs within the relative positioned slideholder. (decorative purpose) So…the mystery continues……and the question still remains:

problem1:
-how to get the darn footer now on page 1-3 on bottom page if using top 400px is out of league? And how to remove space beneath that footer in IE9 and FF if I WOULD use top 400px.? I guess for this I should show an example again but for now I focus on problem 2.

problem2
-how to remove space under the footer on page 4 without using sticky footer or coloring body the same?

Very grateful for all your time to look at this issue,
Muse

[Paulie_D]

Frankly, I think your worrying about something that most viewer won’t care about. They all know that if a page isn’t long enough the footer will be raised.

….and the ones that do notice that the footer is at the bottom of the page won’t care how you did it.

[wolfcry911]

Well, I misunderstood you. I thought you had space under the footer within the body (which the top: -40px would create), but you mean space in the viewport (I think). It sounds to me like Paulie is correct, and you do indeed want to use a sticky footer. A sticky footer will sit at bottom of viewport if there isn’t enough content to push it down there on its own, but will go to the bottom of the page or content (and possibly off screen) if there is more content than screen real estate.

using top: -40px is moving the footer 40px up under the shadow, but it also reserves its original space in the document flow – creating a 40px gap under the footer. You could use a negative top margin and z-index to pull it up under the shadow.

regarding the 400px, there must be a reason that value was needed. I haven’t seen the html and css for pages 1-3 so I can’t say, but its seems as if the slideholder doesn’t have height enough to encompass the out-of-flow absolute positioned children. I can also only guess on the reason for the difference in IE8 and FF being that some element in the document is relying on font-size (which differs from browser to browser and platform to platform). I’m also guessing that the problem of space under the footer actually still exists on screens with greater resolution than that your viewing.

If I could see the code, I could fix it for you :)

[muse]

About the sticky footer…..ooooooooo:) and nods about viewport. I thought sticky=fixed. But reading your explanation it’s indeed what I want. Bottom of viewport and if more content comes that it can move down, though I hope that won’t give a gap between grey part and footer if there won’t be any content. I try that out but… ehm….cough….how do I create a sticky footer? Hmm position statick? Probably a very noobish question…but…amuse my lack of knowledge here:).

I definitely try out that margin you mentioned instead of -40 which I understand it makes a gap underneath. I also will give the codepen example of page 1-3….1 will be enough as rest is practically same. Forgive me I will be able at soonest Friday and latest weekend to give it. ( I give you guys a break *grins*).

About the problem still existing on screens with bigger resolutions….I bet….thats why I just want it solved:). My resolution is 1960 by something: am not on pc to check it;)

Thank you lots!!

[wolfcry911]

Now it seems you don’t want a sticky footer… You need to better describe the problem I think. You state you don’t want a gap between grey part and footer, but you also don’t want space below the footer. So the footer needs to stretch (or have the illusion of doing so). Where does the footer content go? At the top of the footer or the bottom, or centered or…? Now I’m beginning to think that Paulie had the right suggestion with the body background the same as the footer.

[muse]

I am sorry for not being very clear with what I want.
My goal is that the footer is always at the bottom of all my content, either out of the viewport by scrolling when there’s much content between slideholder and footer, either at the bottom of my viewport, if there is less content.
What I do not want is extra space under footer when I have not enough content to fill my viewport. Which occured in page5. After reading your advices again I started to realise more that it is not possible what I want on page5 unless I give the body on page5 same color as the footer. Yes the footer will be much wider than on my other pages but at least not having white canvas showing underneath. Sticky footer on page5 would as I understood sit nicely at the bottom of my viewport but as I have no written content there between slideholder and footer, I will be left with an unnecessary gap. So I have to make a choice.

On page1-3 I have enough written content to have my footer on bottom of my content (without any space underneath the footer when I open the browser window full size).
I managed to find the error of that weird margin I had of 400px to keep footer down. As you said it was so weird to need such margin I was determined to find that error and gladly I did. It was caused by an absolute positioned element in between which was not needed to position it absolutely. To keep the story short(er) this time;-).

Now that that is solved and the page5 which I followed Paulies body color advice, I am left with one thing that happened after I removed that weird margin of 400px . On page 4 my gallery navigation (not the website nav) jumped down. I managed to put it where I wanted by position absolute and again using such weird parameter of top 650 (as you see I have a ‘talent’ for such:$). Now I am not so much concerned with the fact I did that, rather than the fact that when I resize my browserwindow, the link GRAPHICS is pushed down underneath other link elements…… :(. I want them to stay on one line with sizing of browser window like my main nav.

When you have the time would you please have a peek at it and explain what I did wrong? If you change code please add a comment behind line as you did before so I know where to look before spitting through each detail.

Enjoy your sunday and thank you very much Wolf!
Muse

Code page4:
URL: http://codepen.io/pen/9795/1
RESULT: http://codepen.io/anon/full/9795/1

PS. You asked about content of the footer…the content of the footer will go centered inside the purple color of the footer.

[wolfcry911]

Muse,
regarding the nav dropdown – you’ve set the minimum width to 710px, but it requires somewhere around 770px to not drop. But simply changing the min-width value alone won’t fully correct the problem. You’re relying on the text size to determine width, but anyone can adjust text size to suit their wants or needs. Why not float the li, set a fixed width and center the text?

In that navigation, why the obtrusive javascript (why in fact, any javascript for that which css can handle)? And why the target _blank attribute? That practice died out years ago. Let the user decide where the link will open.

Regarding the footer , why set the stretch only on page 5? What if people are browsing with viewports larger than yours on the other pages? They may see space below the footer depending on content length. And why the extraneous empty div for the footer border – its sloppy and almost never needed.

[muse]

Hello Wolf,
I will try with the floating, fixed width and centering text. Hopfully it will work with the other postioned elements.

I am working with dreamweaver and used the behaviors for swapping images. CSS would indeed be better. Somehow I thought it would require more code doing it with css…..thanks for pointing it out. Regarding target…was doubting it myself as I know you can indeed nowadays choose it yourself. Good to know I can get rid of that:)

About the footer….I did not set stretch but colored body same as footer…on other pages I have a texture for the body-background between slideholder and footer on which my written content appears. I do not want to loose that……I also do not know how to fix that problem with bigger resolutions…I am aware that when a person with a bigger resolution views the page….that grey body background flows under footer…..

About border on footer….its a png as the border has a shadow on top. I tried to use pseudoclass but i did not manage to place the border in a way that the shadow flows outside footer instead within footer. I know I can make shadow with css but I chose to embed it in png with the border.Should I use pseudoclass for it or is there any easier way to embedd that border without extra div?

Thank you lots for your reply:)

[Author]

Posts