Grow your CSS skills. Land your dream job.

[Solved] My footer just disappeared in PHP land

  • # July 11, 2009 at 4:48 pm

    Hi everyone,

    I was doing fine with customizing my WordPress blog today. I was just fine tuning some code in my index.php & style.css files (didn’t even touch the footer) when all of a sudden I noticed my footer DIV went bye bye. I was messing around with some code in the index.php file but only related to the .comment DIV One of the last things I remember tweeking was some code related to the ".comment" div in the style.css file and the very last thing I remember doing was editing the ".searchbutton" div (i had gotten rid of the "text-indent:-9999px" so the text "search" would show up in the button).

    The URL of my blog is:

    http://criticall.co.cc/

    Here is the index.php code:

    Code:
    < ?php get_header(); ?>

    < ?php if (have_posts()) : ?>

    < ?php while (have_posts()) : the_post(); ?>

    id=”post-< ?php the_ID(); ?>“>

    ” rel=”bookmark” title=”Permanent Link to < ?php the_title_attribute(); ?>“>< ?php the_title(); ?>

    < ?php the_time('l, F jS, Y') ?>

    < ?php the_content('read more... »'); ?>

    < ?php comments_popup_link('comment', '1 comment', '% comments'); ?>

    < ?php endwhile; ?>

    < ?php else : ?>

    Not Found

    Sorry, but you are looking for something that isn’t here.

    < ?php get_search_form(); ?>

    < ?php endif; ?>

    < ?php get_sidebar(); ?>

    < ?php get_footer(); ?>

    Here is my style.css code:

    Code:
    /*
    criticall

    http://criticall.co.cc/

    Highlite Blue: #0066ff
    Black Text: #000000
    Middle Gray: #666666
    */

    /*
    RESET
    */
    * {margin:0; padding:0;}
    html {overflow-y: scroll;}
    html,body {height:100%}
    body {font-size: 12px; font-family:Arial, san-serif; color: #000000;
    background: url(http://cdn.css-tricks.com/images/topbar-background.png) top center repeat-x white;}

    /*
    UTILITY
    */
    .floatleft {float: left;}
    .floatright {float: right;}
    .clear {clear: both;}

    a {color:#0066ff; text-decoration: none; }
    a:hover { color:#0066ff; background: #eeeeee; border-bottom:1px dotted #0066ff;} a h1:hover { color:#0066ff;}

    h1 {color:#666666; font-size: 3em; font-weight: normal;}
    h2 {color:#666666; font-size: 2em; font-weight: normal;}
    h3 {color:#666666; font-size: 1.5em; font-weight: normal;}

    /*BLOG POSTS*/
    .date {
    color:#666666;
    font-size:10px;
    float:left;
    text-transform: lowercase;
    padding:0 0 15px 0;
    }

    .metadata {
    color:#666666;
    font-size:10px;
    float:right;
    text-transform: lowercase;
    padding:0 0 15px 0;
    }

    .tags {
    color:#666666;
    font-size:10px;
    float:left;
    text-transform: lowercase;
    padding:15px 0;
    }

    .comments a {
    border: 0px solid;
    outline: none;
    display:block;
    width:100px;
    height:48px;
    outline: none;
    background: url(http://cdn.css-tricks.com/images/comment-button.png) 0 0 no-repeat;
    color:#0066ff;
    font-size:10px;
    float:right;
    text-transform: lowercase;
    background-position: 0px -48px;
    font-weight: bold;
    }

    .comments a:hover
    {
    background-position: 0px 0px;
    color:#ffffff;
    }

    /*
    STRUCTURE
    */
    #pagewrap {
    width: 1000px;
    margin: 0px auto -100px;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    }

    #push {
    height: 100px;
    }

    #content
    {
    width: 700px;
    float: left;
    background: #fff;
    }

    #contentpadding
    {padding: 20px}

    #sidebar
    {
    width: 300px;
    float:right;
    }

    #sidebarpadding
    {
    padding: 20px 20px 20px 65px;
    }

    /*
    FOOTER
    */
    #footer {
    height:100px;
    background: #eeeeee;
    }

    #footerguts {
    width: 1000px;
    margin: 0 auto;
    }

    /*
    HEADER
    */

    h1#logo a
    {
    outline: none;
    text-indent: -9999px ;
    display:block;
    width:256px;
    height:83px;
    background: url(http://cdn.css-tricks.com/images/title-button.png) top left no-repeat;
    text-margin:0 10px 8px 0;
    float:left;
    }

    h1#logo a:hover
    {
    background-position: 0px -83px;
    background-color: #d2e4ff;
    }

    #header
    {
    height: 89px;
    width: 100%;
    margin:0 auto;
    position:relative;
    }

    #header div
    {
    float:left;
    }

    #header p
    {
    text-indent: -9999px;
    }

    #about a
    {
    border: 0px solid;
    outline: none;
    text-indent: -9999px;
    display:block;
    width:106px;
    height:83px;
    background: url(http://cdn.css-tricks.com/images/about-button.png) 0 0 no-repeat;
    position:absolute;
    top:0px;
    left:400px;
    }

    #about a:hover
    {
    background-position: 0px -83px;
    background-color: #d2e4ff;
    }

    #contact a
    {
    border: 0px solid;
    outline: none;
    text-indent: -9999px;
    display:block;
    width:134px;
    height:83px;
    background: url(http://cdn.css-tricks.com/images/contact-button.png) 0 0 no-repeat;
    position:absolute;
    top:0px;
    left:515px;
    }

    #contact a:hover
    {
    background-position: 0px -83px;
    background-color: #d2e4ff;
    }

    #rss a
    {
    border: 0px solid;
    outline: none;
    text-indent: -9999px;
    display:block;
    width:50px;
    height:83px;
    background: url(http://cdn.css-tricks.com/images/rss-button.png) 0 0 no-repeat;
    position:absolute;
    top:0px;
    left:658px;
    }

    #rss a:hover
    {
    background-position: 0px -83px;
    background-color: #d2e4ff;
    }

    /*
    SEARCH FORM
    */
    form#searchform
    {
    display:block;
    width:255px;
    height:20px;
    position:absolute;
    top:56px;
    left:753px;
    }

    .searchbutton
    {
    color: #0066ff;
    border: 0px solid;
    display:block;
    width:45px;
    height:20px;
    background: #d2e4ff;
    position:absolute;
    top:0px;
    left:202px;
    -moz-border-radius-bottomright: 4px;
    -moz-border-radius-topright: 4px;
    -webkit-border-bottom-right-radius: 4px;
    -webkit-border-top-right-radius: 4px;
    font-size: 12px;
    }

    .searchbutton:hover
    {
    background-color: #0066ff;
    color: #ffffff;
    font-size: 12px;
    }

    .searchfield
    {
    background:url(http://cdn.css-tricks.com/images/search-field-shadow.png) top left repeat-x #666666;
    color: #eeeeee;
    border: 0px solid;
    position: absolute;
    top:0px;
    left:0px;
    display:block;
    width:200px;
    height:20px;
    -moz-border-radius-bottomleft: 4px;
    -moz-border-radius-topleft: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -webkit-border-top-left-radius: 4px;
    font-size: 12px;
    }

    I will also post the header and footer files for good measure.

    header.php

    Code:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    >

    footer.php

    If you need anymore information or have any questions then let me know and I will provide. Thank you so much!

# July 12, 2009 at 2:30 am

Looks like you are missing a sidebar too. Are you using any plugins? Are the footer and sidebar still absent if you switch back to the default theme?

# July 12, 2009 at 5:39 am

is the footer & sidebar in the proper directory?

also looking at your footer code, looks like your trying to call the footer in the footer, take out the <?php wp_footer(); ?> within the footer

# July 12, 2009 at 8:35 am
"ikthius" wrote:
is the footer & sidebar in the proper directory?

also looking at your footer code, looks like your trying to call the footer in the footer, take out the <?php wp_footer(); ?> within the footer

Hi ikthius,

Yes the footer and sidebar are located in my theme folder along with all the other .php files you’d expect in a default WP theme.
I have taken out the <?php wp_footer(); ?> in the footer.php file but to no avail.

"apostrophe" wrote:
Looks like you are missing a sidebar too. Are you using any plugins? Are the footer and sidebar still absent if you switch back to the default theme?

Hi apostrophe,

Yes, I was focusing so much on my footer that I forgot to mention that the side bar is not showing either. I actually am using the default Akismet 2.2.3 plug-in but that code does not show up in the side bar. In fact, my side bar is rather bare, code wise.

Here is the side bar code:

Code:

UPDATE:
I should also mention that I made an adjustment to my footer.php code with a friend’s help. They found an unclosed ending DIV tag that looked like " </div ". So I corrected that along with ikthius’s suggestion of removing the footer call function code " <?php wp_footer(); ?> ".

Here is the updated footer.php code:

Thanks for the help so far.

# July 12, 2009 at 9:36 am

Are you definitely using index.php as your home page or have you set a wp page? If you click on comments and go to single.php then the footer shows.

# July 12, 2009 at 6:06 pm
"apostrophe" wrote:
Are you definitely using index.php as your home page or have you set a wp page? If you click on comments and go to single.php then the footer shows.

I am certain index.php is my homepage because i just changed some code around, uploaded it and then refreshed http://criticall.co.cc/ and the change manifested. Not sure what a WP page is.

You are right. The footer shows on single pages. Thanks for pointing that out.

# July 13, 2009 at 5:40 am
Quote:
Not sure what a WP page is.

So you are using posts for your about and contact pages? :?

Quote:
You are right. The footer shows on single pages. Thanks for pointing that out.

So what have you done different in single.php to index.php?

# July 13, 2009 at 10:39 am
"apostrophe" wrote:
Quote:
Not sure what a WP page is.

So you are using posts for your about and contact pages? :?

Oh duh. WP page. Yes now I know what that is. I use WP pages for my "about" and "contact" pages.

Quote:
Quote:
You are right. The footer shows on single pages. Thanks for pointing that out.

So what have you done different in single.php to index.php?

That is the tricky part. I have to sift through the code and cross reference. I am on that now. The answer must be there. If not, at least a major clue.

Here is the "single.php" page code:

Code:
< ?php
/**
* @package WordPress
* @subpackage Default_Theme
*/

get_header();
?>

< ?php if (have_posts()) : while (have_posts()) : the_post(); ?>

id=”post-< ?php the_ID(); ?>“>

< ?php the_title(); ?>

< ?php the_content('

Read the rest of this entry »‘); ?>

< ?php wp_link_pages(array('before' => ‘

Pages: ‘, ‘after’ => ‘

‘, ‘next_or_number’ => ‘number’)); ?>
< ?php the_tags( '

Tags: ‘, ‘, ‘, ‘‘); ?>

< ?php if (('open' == $post-> comment_status) && (‘open’ == $post->ping_status)) {
// Both Comments and Pings are open ?>
You can leave a response, or ” rel=”trackback”>trackback from your own site.

< ?php } elseif (!('open' == $post-> comment_status) && (‘open’ == $post->ping_status)) {
// Only Pings are Open ?>
Responses are currently closed, but you can ” rel=”trackback”>trackback from your own site.

< ?php } elseif (('open' == $post-> comment_status) && !(‘open’ == $post->ping_status)) {
// Comments are open, Pings are not ?>
You can skip to the end and leave a response. Pinging is currently not allowed.

< ?php } elseif (!('open' == $post-> comment_status) && !(‘open’ == $post->ping_status)) {
// Neither Comments, nor Pings are open ?>
Both comments and pings are currently closed.

< ?php } edit_post_link('Edit this entry','','.'); ?>

< ?php comments_template(); ?>

< ?php endwhile; else: ?>

Sorry, no posts matched your criteria.

< ?php endif; ?>

< ?php get_footer(); ?>

# July 19, 2009 at 1:16 pm

Strangeness, for some reason the footer and sidebar are getting sucked up into the content and content padding DIVs on the main index.php page. However on a single.php page with out any comments, I only see the sidebar getting sucked up into the content DIV. And on single.php page with 1 or more comments, the footer and sidebar appear perfectly. This is nuts!!! If anyone else wants to give a shot, be my guest!

http://criticall.co.cc/

# July 19, 2009 at 1:42 pm

On index.php you have #sidebar inside the post div inside #contentpadding. And on single.php it’s inside #content.

As always, validate.
index.php http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fcriticall.co.cc%2F

single.php http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fcriticall.co.cc%2Fthis-post-will-have-no-comments-for-the-first-few-minutes-of-its-life%2F

# July 23, 2009 at 12:15 pm
"apostrophe" wrote:
On index.php you have #sidebar inside the post div inside #contentpadding. And on single.php it’s inside #content.

As always, validate.
index.php http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fcriticall.co.cc%2F

single.php http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fcriticall.co.cc%2Fthis-post-will-have-no-comments-for-the-first-few-minutes-of-its-life%2F

Hey I just changed servers. All the code is the same but I made new posts.

I see what you mean about the #sidebar being inside the post div inside the #contentpadding but how did it get there? I checked my index.php and single.php pages and the #footer and #sidebar come after all the other DIVS (content, contentpadding, post) have been sealed with the </div> tags.

Also I do not quite understand the error messages I am getting back from the Validator like this one:

# Info Line 55: start tag was here

><div id="content">

What is wrong with this? and What does "start tag was here" mean? I guess I have to research all this.

# July 23, 2009 at 12:39 pm

It means you have an unclosed tag or div somewhere, which may or may not sort out your layout problems when it is fixed.

# July 23, 2009 at 5:00 pm

Hey thanks apostrophe. I added 2 </div> tags and the index.php page is 100% valid now :)

I also added 1 </div> at the end of single.php and now there is only one error which is :

Quote:
Error Line 142, Column 103: Attribute "aria-required" is not a valid attribute

…ize="22" tabindex="1" aria-required=’true’ />

…but that is WordPress code that I did not touch. Thats’ a language I dont get.

Anyways, so the single.php layout looks as it should IF there are no comments. If there are any comments, the only problem is that the sidebar starts towards the bottom of the page. The footer is in place though. Remember, before adding that extra </div> at the end of the single.php document (but before the php calling code for the sidebar and footer) the single.php pages with posts were showing up fine. So now this seems to be a major conundrum. Any more suggestions?

# July 23, 2009 at 6:15 pm

Just ran a single page with comments through the validator http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fcriticall.co.cc%2F%3Fp%3D3 and you still have mismatched tags in there. Check comments.php, I’m pretty sure that’s where the problem will be.

As for "aria-required=’true’" – don’t worry about it http://comox.textdrive.com/pipermail/wp-testers/2008-November/010081.html.

# August 1, 2009 at 6:05 pm
"apostrophe" wrote:
Just ran a single page with comments through the validator http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fcriticall.co.cc%2F%3Fp%3D3 and you still have mismatched tags in there. Check comments.php, I’m pretty sure that’s where the problem will be.

As for "aria-required=’true’" – don’t worry about it http://comox.textdrive.com/pipermail/wp-testers/2008-November/010081.html.

Hey apsotrophe, Thanks for letting me about the "Aria-required=true" situation. So I found out the culprit tag was actually in the footer.php. To be more specific, it was the </div> that followed <div id="push"></div>. When I got rid of that and ran it through the Validator it said my document was ok but here is the catch….The sidebar still starts near the bottom of the page. So no visual change happening here.

On top of that, the footer for my index.php and my NON-commented single.php page stretch 1000px wide when it is supposed to go 100% of the browser width. When I run the index.php and my NON-commented single.php page through the Validator it says that I have 4 errors. 3 of them are related to problems with the </body> and </html> tags. Then there is the one that is related to the <div id="pagewrap">. Here are the URLS:

index.php http://validator.w3.org/check?uri=http%3A%2F%2Fcriticall.co.cc%2F&charset=(detect+automatically)&doctype=Inline&group=0

NON-commented single.php http://validator.w3.org/check?uri=http%3A%2F%2Fcriticall.co.cc%2F%3Fp%3D4&charset=(detect+automatically)&doctype=Inline&group=0&verbose=1&user-agent=W3C_Validator%2F1.654

I am at the point where I am seriously thinking about starting over with the coding because I feel I have reached an sever impass where by solving one problem I create another. It’s highly frustrating. Once again though, any help would be appreciated.

Viewing 15 posts - 1 through 15 (of 28 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".