WordPress › Support » How to fix overlapping and slightly misplaced footer?

Seth Krasnianski
Member
Posted 8 months ago #

Hello everyone!

I am fairly new to wordpress and having some issues with integrating my knowledge of languages.

I am having a problem with my footer on a custom theme that I am creating. I added some css to stick it to the bottom, and the result is the footer stuck to the bottom of the page, but it is forced to overflow even on pages with minimal content.
Also, when you resize the page to be horizontally small, the footer overlaps some content before it forces overflow.

Website with issue : http://www.sjkstudios.com/blog

THE HTML

[Code moderated as per the Forum Rules. Please use the pastebin]

THE CSS
[CSS moderated as per the Forum Rules. Please just post a link to your site.]

Any help is much appreciated.

Thank you,

Seth Krasnianski
geeksfolder
Member
Posted 8 months ago #
Hi Seth,

Is there any specific reason you have added margin-bottom:-220px on #page-wrap?

It should work if you change #page-wrap (line 136 on style.css) to
```
#page-wrap {
    clear: both;
    margin: 0 auto;
    width: 960px;
}
```
Seth Krasnianski
Member
Posted 8 months ago #

Hello geeks,

Theoretically the negative margin on the bottom was to force the footer to the bottom at all times. Since the negative margin was = to the height of the footer, it snugged it below it.

I tried what you said and it partially worked, but removed the footer from being statically at the bottom.

Any other ideas?
geeksfolder
Member
Posted 8 months ago #

As your layout is structured like

[header box]
[page-wrap box]
[footer box]

you don't have to give any negative margin value to #page-wrap box.

Check out the site below for more about the box model.
http://www.addedbytes.com/for-beginners/the-box-model-for-beginners/
cammies
Member
Posted 3 months ago #

I have used 3 separate plugins that allow me to paste html code into the header. This works fine except the header then appears top left and not in the usual header area. How do I fix please?

Another problem I have is disappearing content - even the css style sheet disappears off the screen - this seems to happen in both Firefox and IE - I notice this has been going on for years, yet no one seems to offer a permanent fix?
geeksfolder
Member
Posted 3 months ago #

Hi cammies,

Are you still having the issue?
If so, can you post your url so I could have a better idea of what the issue is?
cammies
Member
Posted 3 months ago #

Thank you geeksfolder, yes problem still not solved - my URL is

http://businesseguides.com/webuild/sample-page.
I am using the plugin 'Header and Footer', but it happens with 2 others as well, one being HeaderNFooter.
geeksfolder
Member
Posted 3 months ago #

It seems the plugin doesn't place the code inside the header, but right after body tag...

Not 100% sure if you could actually add the new header code in the header area of your theme.

If you want to modify the header code, I would suggest to manually update the header code. If you are not sure, just let me know, I will help you :)
cammies
Member
Posted 3 months ago #

Very kind of you geeksfolder. I have decided the best way is to build a child theme (named 'kid') and want to insert a logo in the header, but I am having trouble doing this. The URL of the logo is:

http://businesseguides.com/webuild/wp-content/uploads/2012/02/eGuide-Logo-.4.jpg

Can you guide me as to how I insert the correct image code in 'kid'

The kid theme is:

/*
Theme Name: Kid
Description: hopeful it works
Author: houston
Template: twentyten

(optional values you can add: Theme URI, Author URI, Version)
*/

@import url("../twentyten/style.css");

/* =Header
-------------------------------------------------------------- */

#header {
padding: 30px 0 0 0;
}

#site-title {
background: transparent url(images/eGuide-Logo-.4) no-repeat top left;
float: left;
margin: 0 0 20px 0;
width: 500px; height:148px;
font-size: 50px;
line-height: 50px;
padding-left: 290px;
}
#site-title a {
color:#FF3333;
font-family:Arial;
font-size:50px;
font-weight:bold;
text-decoration:none;
text-shadow:1px 1px 0 #ccc;
letter-spacing: 1px;
}
#site-description {
clear: right;
float: right;
margin: 44px 0 18px 0;
width: 220px;
color: white;
text-decoration: none;
text-shadow: 1px 1px 1px #333;
}
cammies
Member
Posted 3 months ago #

Very kind of you geeksfolder. I have decided the best way is to build a child theme (named 'kid') and want to insert a logo in the header, but I am having trouble doing this. The URL of the logo is:

http://businesseguides.com/webuild/wp-content/uploads/2012/02/eGuide-Logo-.4.jpg

Can you guide me as to how I insert the correct image code in 'kid'

(I have just included the full URL between the brackets below and this has worked!)

The kid theme is:

/*
Theme Name: Kid
Description: hopeful it works
Author: houston
Template: twentyten

(optional values you can add: Theme URI, Author URI, Version)
*/

@import url("../twentyten/style.css");

/* =Header
-------------------------------------------------------------- */

#header {
padding: 30px 0 0 0;
}

#site-title {
background: transparent url(images/eGuide-Logo-.4) no-repeat top left;
float: left;
margin: 0 0 20px 0;
width: 500px; height:148px;
font-size: 50px;
line-height: 50px;
padding-left: 290px;
}
#site-title a {
color:#FF3333;
font-family:Arial;
font-size:50px;
font-weight:bold;
text-decoration:none;
text-shadow:1px 1px 0 #ccc;
letter-spacing: 1px;
}
#site-description {
clear: right;
float: right;
margin: 44px 0 18px 0;
width: 220px;
color: white;
text-decoration: none;
text-shadow: 1px 1px 1px #333;
}
geeksfolder
Member
Posted 3 months ago #

Cool! So all working ok?
Just let me know if there's anything else I can help you with.
cammies
Member
Posted 3 months ago #

Will do geeksfolder and many thanks.

There is one thing - I still keep losing work I have typed into WordPress and also the kid style.css changes. However provided I update the kid file on my server all seems OK. however it is annoying - I have read many complaints about this going back 3 years and no one seems to have a satisfactory fix. It seems to happen in Chrome, Firefox and IE
geeksfolder
Member
Posted 3 months ago #

Hi cammies,

Not quite sure what issue exactly you are having??
You mean there's a problem with saving your content in WP?
cammies
Member
Posted 3 months ago #

Yes, sometimes when I load a page in WordPress and click on 'edit' the previously saved content has disappeared and I have to re insert it. Similarly when I go to 'Appearance/Editor' the theme 'style.css' is blank or if I try to load the 'kid' it is blank.

see http://wordpress.org/support/topic/disappearing-content-1

Apparently it has been happening to several others, but so far no one that I can see has a cause or fix - it is a tough one! It seems to happen with IE, Firefox and Chrome! I will keeping reading the posts on the problem.
cammies
Member
Posted 3 months ago #

I have looked through dozens of threads on this issue and the only seemingly sensible one is to do as below:

Pasted from <http://wordpress.org/support/topic/content-disappearing-when-i-add-too-much>

'Here is an example of it in my wp-config.php file

/** The Database Collate type. Don't change this if in doubt. */

define('DB_COLLATE', '');

/** Trick for long posts */
ini_set('pcre.recursion_limit',20000000);
ini_set('pcre.backtrack_limit',10000000);

They said it fixed the problem, which is related to too much content.

Reply

You must log in to post.

WordPress.org

Forums

How to fix overlapping and slightly misplaced footer? (15 posts)

Reply

About this Topic

Tags

Code is Poetry