[Solved] My footer just disappeared in PHP land

[iasiis]

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:

id=”post-“>

” rel=”bookmark” title=”Permanent Link to “>

Posted in

‘); ?>

Not Found

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

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(/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(/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(/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(/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(/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(/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(/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:

>

/”>

about

contact

“>rss

footer.php

Code:

“>Entries (RSS) and “>Comments (RSS).

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

[apostrophe]

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?

[apostrophe]

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.

[apostrophe]

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?

[iasiis]

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/

[iasiis]

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

[iasiis]

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?

[iasiis]

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

[iasiis]

hey apostrophe,

this has appeared to solve the problem in Firefox and Chrome. the only issue is that on a NON-commented single.php page I am getting the sidebar showing up at the bottom of the page and footer appearing within the sidebar DIV with a 300px width. when i take out the ‘width:100%;’ footer code, I solve the problem there and then the whole site is looking perfect.

the problem is when i look at the site in IE 7.0.6 the NON-commented single.php page does not display properly. When I have the ‘width:100%’ footer code included it displays the sidebar right above the footer. the footer is displayed with a 1000px width only. additionally when I take out the ‘width:100%’ footer code the page displays with the sidebar at the bottom and the footer in the sidebar DIV with a 300px width (just like it was displaying in Firefox and Chrome).

so this is nuts. one problem gets solved only to create a new problem, then again I never checked out how IE was displaying my page as I am not the biggest fan of it but still many people use it. anyways I hope there is a fix for this.

take care,
adam

[iasiis]

oh wait a second, the NON-commented single.php page is displaying wrongly with and without that width:100% footer code. i could have sworn I saw it appear correctly before. i even cleared my cache. i will check it later.

[iasiis]

"apostrophe" wrote:

Go through your files and comment every closing div so that you can see which closing tag goes with which div. Then you will find your problem.

Ok I did what you suggested and discovered that it was the <div class="comments"> div that was screwing my NON-commented single.php page up so I took out that DIV from the comments.php file and all pages display correctly now. The problem is that now I am not able to style this piece of code from the comments.php file:

Code:

Another thing that is funny is that when a post has no comments, the code above does not display "no comments" as it should. On posts with comments it displays ‘1 comment’ or ‘2 comments’ as it should. so this bit is a bit annoying.

Also when I placed <div class="comments"> </div> around the above PHP code that it created a DIV around the <div id="respond"></div> (which contains the comment form) on NON-commented single.php pages. But on COMMENTED single.php pages the <div class="comments"> </div> surrounds only the "1 comment" and "2 comment" H3 text. So I am thinking that some code deeper in the PHP is screwing up the way my page is displaying. Specifically it would be a piece of PHP code that is not displaying the text "no comments" as well as wrapping the ‘comments’ DIV around the ‘respond’ DIV.

i have decided to leave the <div class="comments"> </div> around the above PHP code in order to better demonstrate to you what is going on. Also I have colored every DIV on my page so you can see better what is going on too. The comments DIV you will see to be orange with a green outline. Also, on the single.php page http://criticall.co.cc/?p=4 the pagewrap DIV is not reaching the footer DIV and jsut stops half way down the page.

take care,
adam

PS here is the comments.php code:

Code:

enter the password to view comments

comment_status) : ?>

Comments are closed.

comment_status) : ?>

You must be /wp-login.php?redirect_to=“>logged in to post a comment.

/wp-admin/profile.php”>. ” title=”Log out of this account”>Log out »

/>
name

/>
email (will not be published)

website

ID); ?>

and single.php:

Code:

id=”post-“>

Posted in

Read the rest of this entry »

‘); ?>

‘); ?>

post comment

‘

Pages: ‘, ‘after’ => ‘

‘, ‘next_or_number’ => ‘number’)); ?>

comment_status) && (‘open’ == $post->ping_status)) {
// Both Comments and Pings are open ?>” rel=”trackback”>trackback

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

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.

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

Sorry, no posts matched your criteria.

[iasiis]

interesting, the display problem has been solved. the "pagewrap" DIV shoots all the way to the footer now and the "respond" DIV is not encased in the "comments" DIV. thanks a bunch apostrophe : ) !

do you have any clue as to why on the NON-commented single.php page it is not displaying "no comments"?

thanks again and take care,
adam

[iasiis]

"apostrophe" wrote:

Tbh, no I don’t have a clue. Are you using any kind of comments plugin?

No I am not using a comments plug in. It bothers me that it will not say ‘no comments’ only because it is not behaving as the program is intended to. i really do not care if it does not say it. but still. it should be performing. i think it is a deep PHP issue. what else could it be?

do you knwo any site or set of tutorials that goes through the word press PHP code line by line explaining what all of it does?

[iasiis]

"apostrophe" wrote:

Well there’s a simple test. Just switch to the default theme, if it’s working there then you know the problem is somewhere in your code.

Hey again, well it seems with the WordPress Default 1.6 Theme, it does not display "no comments" but on the "WordPress Classic 1.5" it does actually display "No comments" so the code must be somewhere deeper in the PHP.

Thanks for your help again :)

Take care,
Adam

[iasiis]

Yes! "No Coments" now shows! Excellent work apostrophe :)

[Author]

Posts