Hi, i've installed a cms script onto my server. It's pretty basic (using mainly html and css with php) but there's a bug in one of the default skins with the footer. Basically, if there's not enough content on the page, the footer is meant to be pushed to the bottom of the screen. (Note it IS NOT a css "sticky footer"). In firefox this is broken, it's displayed fine in Chrome and (surprisingly) IE. I can't get help from the coder (my friend) as he's on holiday, so I thought i'd post here for help and also email him the fix. It's easy enough, i'm just pretty new when it comes to css. A demo installation of the script on the official site (with the problem) can be seen here: http://bit.ly/hceZ4f, and the css file found here: http://bit.ly/dM52CH Any help greatly appreciated PS. Could anyone check the site in a few browsers and confirm wether the skin is buggy or not please? I don't want to be running a live site that's a mess. So far: Chrome 8 (Windows) - Fine IE 8 (Windows) - Fine IE 7 - Untested IE 6 - Untested Firefox 3.0 - Untested Firefox 3.5 - Untested Firefox 3.6 - Broken Firefox 4 - Untested Safari (Mac) - Untested
Assuming you'll have more content in future, at stylesheet.css #footer { position: absolute; [COLOR="red"]<-- delete this [/COLOR] } Code (markup):
Hi radiant, big thanks for your help. However your "assuming you'll have more content in future" comment has thrown me off. Some pages will have enough content, and some won't - indefinitely. And for the ones that don't this shouldn't be a problem and the footer should display correctly. I've modified the css to your suggestion accordingly, but it will do what i've described above right? (edit: reverted the css back to how it was - your suggestion broke it in I.E.) ***UPDATE*** I've added a test page, that's long scrolls (link in navbar), and as you can see the footer is broken in all browsers. It stays at the page is was and doesn't go to the bottom of the page it should Can anyone go give it a look and give me a fix for that too? Thanks TO CLEAR UP: - Firefox: Footer is broken, doesn't display where it should - Footer isn't pushed down to bottom when the page is long (all browsers)
Go for a sticky footer. Also, take a look at this http://matthewjamestaylor.com/blog/bottom-footer-demo.htm I don't see anything abnormal. Perhaps, press Ctrl-F5 (forces a cache refresh) on your browser.
Sorry, a sticky footer is not what I want. LMAO, that's the exact article i used to do the footer push! As I said, doing it just as described yields 2 problems: - Footer isn't pushed down to bottom when the page is long (all browsers) - Firefox: Footer is broken, doesn't display where it should (perhaps fixing the first bug will impact this) Sure you can't see anything? Go to the url provided and click "long page" in the nav bar. Still don't see anything? thanks so far, is there any other workarounds?
That's weird. The code on it's own does exactly what I want, but when I modify my css (add that code in and take the old "solution" out) there is no change. There's obviously something conflicting, any guess as to what it is? I've reverted CSS back to how it was initially. UPDATE: I also tried matt james taylor's css (the one that's in use in conjunction with my current css) on it's own and it works. But when added to mine it doesn't. So there's definately some conflict somewhere but i don't know where
You don't need to be harsh to my friend... First of all you should learn basics about CSS. Your layout is really very easy, nothing special, but you made some mistakes generally: position: absolute; bottom:0; Code (markup): in the footer does exactly what you "tell" him to do. It stays at the bottom, when you resize the viewport it does NOT move to the bottom. If you want it fixed... use position:fixed. If you don't want it fixed, delete postion:absolute and bottom:0 ... and it is under the #main container where it belongs Also you have to notice that if you use padding you need to substract it from the width or height! Sometimes you need to ADD it, depends on the case.
Always remember this: while IE may be showing what you want, Firefox is showing what you wrote. Never, ever trust IE to do ANYTHING right.
Where was I being harsh? Lol thanks, but I do know basics. I agree with this, i never said otherwise. When I do that, the footer becomes sticky at the bottom. I'm trying to make it so that the footer is pushed to the bottom ONLY when there is not enough content on the page, otherwise if there is then is should display how it would otherwise. As i said in a post before, using the code from this article: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page works on it's own, but not when it is added to my layout. Where is the conflict? Thanks for the tip. Thanks for your help so far, please reply so i can sort this out!
Thanks for your reply, i do appreciate you spending your time trying on my problem, however that can't help. Infact no article can, only someone like yourself - since i need someone to look at my specific situation. Maybe I wasn't clear earlier/you misunderstood what my problem is. Let me explain again: - I want to incorporate the following css method: http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page onto my website. If you download the source of the demo (http://matthewjamestaylor.com/blog/bottom-footer-demo.htm), it works exactly as it should. - However, when combined with my current css stylesheet (http://bit.ly/dM52CH) on my website (http://bit.ly/hceZ4f), that css trick doesn't work properly. - Therefore, there must be a conflict somewhere within the css. My question is, what is part of my current css code is conflicting with the css code from that footer trick? And please would you be so kind as to give me the fixes. Like you said earlier, my css file is very easy and nothing special, therefore the problem should be very easy to sort. Hope i made things clearer, please reply!
Do me a favour, zip all your html/css stuff into a file and upload it somewhere. PM me the link to the zip file... and I will take a look at it tomorrow morning.