Help with CSS footer please...

richieboy · 9 Jun 2007 at 21:47

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:

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

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.

richieboy · 9 Jun 2007 at 22:08

blade007 said:
also goes a bit funny in FF

you could try a clear:both; statement in the footer div

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!

richieboy · 9 Jun 2007 at 22:37

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?

richieboy · 10 Jun 2007 at 08:15

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:

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:

richieboy · 10 Jun 2007 at 09:54

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

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...

richieboy · 10 Jun 2007 at 10:49

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!

richieboy · 10 Jun 2007 at 12:13

The site is now at http://richl.com if anyone else wants to help.

richieboy · 10 Jun 2007 at 18:27

Well, i followed both this and this through with no luck. Both still have the same "footer jumping" issue when i do it...

richieboy · 10 Jun 2007 at 20:13

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

richieboy · 11 Jun 2007 at 09:09

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.

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

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.