Help with CSS footer please...

richieboy

richieboy

richieboy

Associate
Joined
29 Dec 2004
Posts
2,253
Hi guys,

I'm trying to start using WordPress, so far so good and i have finally found a theme i like. I know the very basics when it comes to HTML/PHP/CSS, i know how to tweak but don't know much more, and am trying to fix a problem i have found with this template whereby the footer jumps about!

Let me set the scene:
I visit the site, all looking great. I hover over the "Home", "About", "Drumming", or "Computing" nav links at the very top of the page and whoops...the footer has moved from the bottom of the page to the bottom of the left navigation menu.

Here are a couple of screenshots...before, i've just typed in the URL:

cssfooter1ty1.gif


And after i have hovered over one of the nav links at the top:

cssfooter2ew4.gif


The site is at http://richl.com/, if anyone would mind taking a look i'd appreciate it. I'm not sure if this is just an IE bug, or just a tweak i need to make to the template. If anyone needs anymore info please let me know.

Thanks.
 
Last edited:
blade007 said:
also goes a bit funny in FF

you could try a clear:both; statement in the footer div
Click to expand...

Thanks for your help - i added the clear:both to the footer part of my CSS, so it is now as follows:

Code: 
#footer {
	background: url("images/footer-bg.png") repeat-x;
	float: left;
	height: 32px;
	padding-top: 8px;
	text-align: center;
	width: 100%;
	clear:both;
}

Unfortunately i'm still having the same problem. If i haven't done this correctly let me know!
 
#navigation ul li.page_item a:hover {
background: url("images/nav-selected.png") repeat-x;
}
Click to expand...
This part of the CSS file is the part that is breaking the page. If you remove it you'll notice the problem goes away, but I'm not sure how it will affect the main menu. I can't unfortunately reproduce the page exactly on my local box because I don't have WordPress therefore it doesn't show up correctly, all it shows is just a white page with words :/
 
I completely agree that that's the bit messing it up, it make's a lot of sense (as that's when the problem occurs) and if i remove it the problem does disappear - but then the top nav menu obviously doesn't have the hover effect...which i was kind of hoping to keep.

Is there any way i can mod the footer div, put it in a different place etc to keep it in its place?
 
You don't need float: left in your footer, well you shouldn't.

Also try putting position: relative into the footer code as well. FF isn't displaying it properly.
 
Thanks for the suggestions guys, i now have:

Code: 
#footer {
	background: url("images/footer-bg.png") repeat-x;
	height: 32px;
	padding-top: 8px;
	text-align: center;
	width: 100%;
	position: relative;
	clear: both;
}

Unfortunately i'm still having problems, although when the footer moves it is now above the text rather than being "mixed" in with it, as follows:

cssfooter3un5.gif


Does it look any better in FF now out of interest? Any more ideas of if i can move the footer div or something so it doesnt jump around!? :confused:
 
Have you tried the clear:both in its own div, and then putting that div before the footer. It has cured similar problems for me

Aaron
 
fluiduk said:
Have you tried the clear:both in its own div, and then putting that div before the footer. It has cured similar problems for me

Aaron
Click to expand...

I have now tried adding this to my CSS:

Code: 
#clearing {
	clear: both;
}

And adding this div before my footer HTML, like this:

Code: 
    <div id="clearing"></div>
    <div id="footer">
    	Copyright &copy;<?php bloginfo('name'); ?>. Powered by <a href="http://www.wordpress.org">WordPress</a>. Theme designed by <a href="http://www.erikgyepes.com" title="Erik Gyepes">Erik Gyepes</a></div>
    </div>

</body>
</html>

Unfortunately im still having the same problem. I also tried nestling the footer inside the clearing div, which also didnt make a difference.

Appreciate your help by the way guys... :)
 
Try taking the footer out of the main body div. If you notice, there is a </div> at the end of the text inside the footer div. Remove that, and add "</div>" above <div id="footer">, so the footer is now standalone. Then, go into the stylesheet, and add:

position: fixed;
bottom: 0;

to the #footer style.

It doesn't really fix the issue properly, since it's just fixing the footer to the bottom of the page... quite annoying this CSS problem :) Tried various things, but for some reason, using any type of :hover on the main menu's styles makes the footer ride up the page which is just bizarre.
 
I tried the above last night, it was a workaround one site suggested whilst i was Googling like crazy...am really not too keen on it to be honest, reminds me of using framesets!

Main reason im not too keen is because it kind of makes it look like that is the bottom of the page...i tried it out on my girlfriend and she agreed that if i hadn't of mentioned it she would have thought that was the bottom of the page and stopped reading.

Unless there are any other suggestions i guess i'll either have to live with it, remove the hover, or remove the footer! :eek:

This works fine in FF now by the way, god damn MS!
 
The worst has happened. I've had to remove the a:hover for the top navigation menu and just have the text go white - disaster!

That aside, what does everyone think? I know its a little...green...but i wanted a change :p
 
Looks very nice overall :)

Although I'm not sure I like the massive RSS button, I think I personally dropped it down to something like 32x32 and has it to the left side of the "RSS Feed" line. Might have also added a "text-align: justify" to the news post contents instead of left alignment. Other than that, I think it's looks great!
 
Yeah, definitely drop the massive feed icon. Keep text left-aligned. Never use justify; it's a readability nightmare.

Don't know what else to say about the layout—it's a theme—removing the footer link back to the creator seems a bit unfair.
 
psyr33n said:
Yeah, definitely drop the massive feed icon. Keep text left-aligned. Never use justify; it's a readability nightmare.

Don't know what else to say about the layout—it's a theme—removing the footer link back to the creator seems a bit unfair.
Click to expand...

Ha, it totally is. When i was playing with everything to try and get the footer to stop jumping around i tried removing everything from it - forgot to put that back :p

Will stick it back in, and tweak the RSS icon.

I know its a theme created by somebody else, as i mentioned in the op i can only really tweak...it would take me months and months to come up with a full theme all by myself...but i like to think i've made it slightly better, as the original had an even bigger header and a slightly less interesting sidebar.

Anywho, cheers guys.
 
You must log in or register to reply here.
Back
Top Bottom