• 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

Viewing 14 replies - 1 through 14 (of 14 total)
  • 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;
    }

    Thread Starter Seth Krasnianski

    (@seth-krasnianski)

    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?

    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/

    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?

    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?

    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.

    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 🙂

    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;
    }

    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;
    }

    Cool! So all working ok?
    Just let me know if there’s anything else I can help you with.

    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

    Hi cammies,

    Not quite sure what issue exactly you are having??
    You mean there’s a problem with saving your content in WP?

    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.

    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&gt;

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

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘How to fix overlapping and slightly misplaced footer?’ is closed to new replies.