Sticky footer layout breaks on blog page

The PHP pages are rarely written with the formatting of the HTML in mind (they don’t need to be for the HTML to function) which makes the HTML harder to read when troubleshooting. Guess that’s just an annoyance, though, and not really important.

When I marked the errors in line 144 in red, I overlooked one… there were three areas that should have been marked red. Two of them were the problem "href"s. Fixing them should clear up the broken links.


<p> <span class="postmeta">Posted in <a class="page" [color=red]href="<a[/color] href="http://prygara.com/blog/category/html-css/" title="View all posts in HTML/CSS" rel="category tag">HTML/CSS</a> | <a class="page" [color=red]href="<a[/color] href="http://prygara.com/blog/2013/07/30/hello-world/#comments" title="Comment on HTML/CSS test post # 1">1 Comment »</a>[color=red]</a>[/color]</span></p>

Cheers

Thanks Ron. I will try posting at php forum - I don’t know php.

Hi Ron,

I was gonna ask if there’s a way of adding the same border on the right side of the menu (same border as I have on the left side). There’s a background image under the navigation. So theoretically the border would be stretching along the right side of the image.

Sergiy

Hi, Sergiy,

Sounds like you just want to change the width and color of the right border of the menu items to match the left border.

Give this a try and see if I’m on the right track:


#navigation li a {
    display:block;
    padding:10px 10px 10px 12px;
    border-left:12px solid #363;
    border-right:[color=blue]12px[/color] solid [color=blue]#363[/color];   [color=blue]/* Changed from: 15px #7d9e7d */[/color]
    background-color:#469050;
    color:#fff;
    text-decoration:none;
}
#navigation li a:hover {
    border-left:12px solid #696;
    border-right:[color=blue]12px[/color] solid [color=blue]#696[/color];   [color=blue]/* Changed from: 15px #8bb98b */[/color]
    background-color:#85ad85;
    color:#fff;
}

Cheers!

Sorry for the confusion, Ron. What I am trying to achieve is to have the same border as I have on the left of the container #outer css - have the same border stretching downwards to the footer along the background image…I guess.

Here’s the link for the image with arrows showing:

https://drive.google.com/file/d/0B6nFRgc8AjO2R1hfWWhKMHpUWlE/edit?usp=sharing

I think from the design perspective it might give a better “finishing” look for the site.

Hi,

The simplest solution would be to take that image and add a 1px #363 colour to the end of it :slight_smile:

Alternatively with css do this:


#leftcol{
border-right:1px solid #363;
margin-right:-1px;
}
#rightcol{border-left:1px solid #363}


I would suggest almost the same two choices as Paul.

If you go the CSS border route, I would do this:


#leftcol {
    width:[color=blue]214px[/color];   /* Changed from 215px */
    float:left;
}
#rightcol {
    overflow:hidden;
    padding:5px 0 8px 25px;
    [color=blue]border-left:1px solid #363;[/color]   /* Add as Paul suggested */
}

In my mind, the altered background image simulating the left column has potential because the menu column right border line could be overlaid by the CSS border of the selected menu item, thereby giving a slightly better sense of “active page”. You would probably want to try it with the menu changes that I recommended in my previous post and take advantage of the #363 color for the non-selected tabs. A modified image is attached in case you want to give this a try.

If you wish to use the background image method but do not care to change the color of the right end of the tabs, then narrow the width of #leftcol by 1px and add 1px of right padding. That will maintain the proper width of the page and allow the vertical line along the right edge of the menu column to show.


#leftcol {
    width:[color=blue]214px[/color];   /* Changed from 215px */
    float:left;
    [color=blue]padding-right:1px;[/color]   /* Added to allow "menu column right border line" to show */

Thanks Paul. I also thought that using the background image with the added border would be the most logical and practical way of doing this. I was not sure about CSS side.

Thanks Ron. I went the altered image route. May be I will play with the right border of the menu as you suggested in your previous post.

Hi Ron,

I was wondering if you can suggest any other places on the web where I can get an answer regarding those possibly broken links in my blog page. I tried posting in sitepoint PHP forum couple of times but it didnt get resolved.

I was also thinking of re-building the blog page again but it means I would have to move it again from my localhost PHP and I am not sure if this will resolve the broken links issue.

I do remember that you don’t deal with PHP but just in case wanted to double check.

Hi, Sergiy,

Allow me to take a wild shot at this.

Wherever this PHP code is located, please make two changes and tell me if they make any difference at all. Delete the quote-percent-s and the </a> that are colored red:


<?php the_tags(__('Tags:', 'kubrick'), ', ', '<br />'); ?> 

<span class="postmeta"><?php printf(__('Posted in <a class="page" href=[color=red]"%s[/color]', 'kubrick'), get_the_category_list(', ')); ?> | 
                        
<?php edit_post_link(__('Edit', 'kubrick'), '', ' | '); ?>
                        
<a class="page" href="<?php comments_popup_link(__('No Comments »', 'kubrick'), __('1 Comment »', 'kubrick'), __('% Comments »', 'kubrick'), '', __('Comments Closed', 'kubrick') ); ?>[color=red]</a>[/color]
</span>

The altered code should look like this:


<?php the_tags(__('Tags:', 'kubrick'), ', ', '<br />'); ?> 

<span class="postmeta"><?php printf(__('Posted in <a class="page" href=', 'kubrick'), get_the_category_list(', ')); ?> | 
                        
<?php edit_post_link(__('Edit', 'kubrick'), '', ' | '); ?>
                        
<a class="page" href="<?php comments_popup_link(__('No Comments »', 'kubrick'), __('1 Comment »', 'kubrick'), __('% Comments »', 'kubrick'), '', __('Comments Closed', 'kubrick') ); ?>
</span>

Let me know what happens. Post the PHP and raw HTML (with the PHP calls) if necessary, and a link to the current test page, of course :slight_smile: .

Hi Ron,

That chunk of code you are referring to is from archive.php file which is part of the WordPress theme template. I just did as you suggested. It looks like it’s not working for me.

If you click on “categorized as” (within a single post) or “comment” links, it’s giving “error 404 - page not found” which I guess is a broken link error…

http://prygara.com/blog/2013/07/30/hello-world/%3Ca%20href=

I think clicking on "Categorized as HTML/CSS " should give all posts in that specific category.

<?php get_header();?>

<?php get_sidebar(); ?>


	<div id="rightcol" role="main">

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

 	  <?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?>
 	  <?php /* If this is a category archive */ if (is_category()) { ?>
		<?php printf(__(''), single_cat_title('', false)); ?>
 	  <?php /* If this is a tag archive */ } elseif( is_tag() ) { ?>
		<h2 class="link"><?php printf(__('Posts Tagged ‘%s’', 'kubrick'), single_tag_title('', false) ); ?></h2>
 	  <?php /* If this is a daily archive */ } elseif (is_day()) { ?>
		<h2 class="pagetitle"><?php printf(_c('Archive for %s|Daily archive page', 'kubrick'), get_the_time(__('F jS, Y', 'kubrick'))); ?></h2>
 	  <?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
		<?php printf(_c(''), get_the_time(__('F, Y', 'kubrick'))); ?>
 	  <?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
		<h2 class="pagetitle"><?php printf(_c('Archive for %s|Yearly archive page', 'kubrick'), get_the_time(__('Y', 'kubrick'))); ?></h2>
	  <?php /* If this is an author archive */ } elseif (is_author()) { ?>
		<h2 class="pagetitle"><?php _e('Author Archive', 'kubrick'); ?></h2>
 	  <?php /* If this is a paged archive */ } elseif (isset($_GET['paged']) && !empty($_GET['paged'])) { ?>
		<h2 class="pagetitle"><?php _e('Blog Archives', 'kubrick'); ?></h2>
 	  <?php } ?>


		<div class="navigation">
			<div class="alignleft"><?php next_posts_link(__('&laquo; Older Entries', 'kubrick')); ?></div>
			<div class="alignright"><?php previous_posts_link(__('Newer Entries &raquo;', 'kubrick')); ?></div>
		</div>

		<?php while (have_posts()) : the_post(); ?>
		<div <?php post_class(); ?>>
				<h2 id="post-<?php the_ID(); ?>"><a class="page" href="<?php the_permalink() ?>" rel="bookmark" title="<?php printf(__('Permanent Link to %s', 'kubrick'), the_title_attribute('echo=0')); ?>"><?php the_title(); ?></a></h2>
				<p class="date"><?php the_time(__('F j, Y', 'kubrick')) ?></p>

				<div class="entry">
					<?php the_excerpt() ?>
				</div>

				<p>
				   <?php the_tags(__('Tags:', 'kubrick'), ', ', '<br />'); ?>
					<span class="postmeta"><?php printf(__('Posted in <a class="page" href=', 'kubrick'), get_the_category_list(', ')); ?> |
						
					   <?php edit_post_link(__('Edit', 'kubrick'), '', ' | '); ?>
						
					   <a class="page" href="<?php comments_popup_link(__('No Comments »', 'kubrick'), __('1 Comment »', 'kubrick'), __('% Comments »', 'kubrick'), '', __('Comments Closed', 'kubrick') ); ?>
					</span>
				</p>

			</div>

		<?php endwhile; ?>

		<div class="navigation">
			<div class="alignleft"><?php next_posts_link(__('&laquo; Older Entries', 'kubrick')); ?></div>
			<div class="alignright"><?php previous_posts_link(__('Newer Entries &raquo;', 'kubrick')); ?></div>
		</div>
	<?php else :

		if ( is_category() ) { // If this is a category archive
			printf("<h2 class='center'>".__("Sorry, but there aren't any posts in the %s category yet.", 'kubrick').'</h2>', single_cat_title('',false));
		} else if ( is_date() ) { // If this is a date archive
			echo('<h2>'.__("Sorry, but there aren't any posts with this date.", 'kubrick').'</h2>');
		} else if ( is_author() ) { // If this is a category archive
			$userdata = get_userdatabylogin(get_query_var('author_name'));
			printf("<h2 class='center'>".__("Sorry, but there aren't any posts by %s yet.", 'kubrick')."</h2>", $userdata->display_name);
		} else {
			echo("<h2 class='center'>".__('No posts found.', 'kubrick').'</h2>');
		}
	  get_search_form();
	endif;?>
	
	</div>



<?php get_footer(); ?>

Hi, Sergiy. Welcome back :slight_smile:

Looking at the PHP that you posted, something strikes me as odd:


<?php get_header();?>

<?php get_sidebar(); ?>


    <div id="rightcol" role="main">

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

      <?php $post = $posts[0]; // Hack. Set $post so that the_date() works. ?>
      <?php /* If this is a category archive */ if (is_category()) { ?>
        <?php printf(__(''), single_cat_title('', false)); ?>
      <?php /* If this is a tag archive */ } elseif( is_tag() ) { ?>
        <h2 class="link"><?php printf(__('Posts Tagged [color=red]&#8216;%s&#8217;[/color]', 'kubrick'), single_tag_title('', false) ); ?></h2>
      <?php /* If this is a daily archive */ } elseif (is_day()) { ?>
        <h2 class="pagetitle"><?php printf(_c('Archive for %s|Daily archive page', 'kubrick'), get_the_time(__('F jS, Y', 'kubrick'))); ?></h2>
      <?php /* If this is a monthly archive */ } elseif (is_month()) { ?>
        <?php printf(_c(''), get_the_time(__('F, Y', 'kubrick'))); ?>
      <?php /* If this is a yearly archive */ } elseif (is_year()) { ?>

The percent-s is surrounded by curly quotes. Normally that is not allowed. Any reason to believe that might be an error? We really need a PHP person to help you with this. I’m very out of my element with PHP. :-/

I think we need a link to the PHP file so we can read the code directly. A look at the raw HTML with the PHP calls might help, too. Don’t really know.

These are a couple of informational observations about the current issue of broken links as a memory jogger. No conclusions being drawn.
(I used the square brackets to indicate clickable links)

From this page:

Click this link(s):
[HTML/CSS test post # 2] or [Read more]
http://prygara.com/blog/2013/08/03/htmlcss-test-post-2/

Go to this URL successfully:
http://prygara.com/blog/2013/08/03/htmlcss-test-post-2/

Published August, 2013 | Categorized as [HTML/CSS] | RSS 2.0 feed
http://prygara.com/blog/2013/08/03/htmlcss-test-post-2/<a%20href= /* on this page, this URL is broken /
http://prygara.com/blog/2013/08/03/htmlcss-test-post-2/&lt;a href= /
this is what it looks like */

Published August, 2013 | Categorized as HTML/CSS | [RSS 2.0] feed
http://prygara.com/blog/2013/08/03/htmlcss-test-post-2/feed/ /* this URL is good */

[Comments]
http://prygara.com/blog/2013/08/03/htmlcss-test-post-2/<a%20href= /* this URL is broken, same as above */

From this page:

Click this link(s):
[HTML/CSS test post # 1] or [Read more]
http://prygara.com/blog/2013/07/30/hello-world/

Go to this URL successfully:
http://prygara.com/blog/2013/07/30/hello-world/

Published July, 2013 | Categorized as [HTML/CSS] | RSS 2.0 feed
http://prygara.com/blog/2013/07/30/hello-world/<a%20href= /* this URL is broken, same as above */

Published July, 2013 | Categorized as HTML/CSS | [RSS 2.0] feed
http://prygara.com/blog/2013/07/30/hello-world/feed/ /* this URL is good */

[1 Comment]
http://prygara.com/blog/2013/07/30/hello-world/<a%20href= /* this URL is broken, same as above */

The same pattern and error is true for JavaScript and Fireworks posts.

On this page:
http://prygara.com/blog/category/html-css/

HTML/CSS test post # 2
http://prygara.com/blog/2013/08/03/htmlcss-test-post-2/

[No Comments >>]
http://prygara.com/blog/category/html-css/| /* This URL is picking up the pipe from the PHP code, thus it fails. */

HTML/CSS test post # 1
http://prygara.com/blog/2013/07/30/hello-world/

[1 Comment »]
http://prygara.com/blog/category/html-css/| /* This URL is picking up the pipe from the PHP code, thus it fails. */

Here’s the PHP file

https://drive.google.com/file/d/0B6nFRgc8AjO2alRvNDRTVnd4eHM/edit?usp=sharing

I tried surrounding percent-s by single quotes before - it did not work for me.

I also think a PHP person would be helpful in this.

Thanks Ron.

PS If it’s not working, I might consider using a blog page on my later projects when I am more familiar how WordPress works. It’s not a big deal at the moment.

Don’t get hung up on grammatical correctness or aesthetics, quotes aren’t crucial during development, take them out for now, put a /* comment */ and get back to them later.

What I’m wondering about is the “kubrick” domain, it’s been retired for a while http://theme.wordpress.com/retired/kubrick/
Are you still using it?

yes, the blog page uses kubrick’s theme. I know it’s out of date and not supported anymore by WP but I spoke with my host support and they said it should work on their end as long as all done correctly. not sure…

@Mittineague, Looking at the example links in post 54, can you determine why is this link malformed?

http://prygara.com/blog/2013/08/03/htmlcss-test-post-2/<a%20href=

It seems to me that the error must be in the construct of the PHP, and I’m assuming the code in the PHP file that is being called is shown (but the code must be wrong).

@810311, Will you please post the raw HTML showing the PHP calls so we can see those calls and assure that we are looking at the right PHP file.

If we can make the failing links work, I think we will be a giant step closer to solving the issue.

Here’s the problem mark-up

<p class="postmetadata alt">
	<span class="postmeta">Published August, 2013 | Categorized as <a class="page" href="<a href="http://prygara.com/blog/category/html-css/" title="View all posts in HTML/CSS" rel="category tag">HTML/CSS</a>  | </a>
	<a class='page'href='http://prygara.com/blog/2013/08/03/htmlcss-test-post-2/feed/'>RSS 2.0</a> feed</span> 
				</p>	
			</div>
		</div>
<!-- You can start editing here. -->
			<!-- If comments are open, but there are no comments. -->
<p><a class="page postmeta" href="<a href="http://prygara.com/blog/2013/08/03/htmlcss-test-post-2/#respond" title="Comment on HTML/CSS test post # 2">Comments</a></a></p>

The <a link’s href values should not be <a links
Question is how are they getting there?

On javascript test post #1 and fireworks test post #1 the Comments and Categorized links are similarly broken, presumably elsewhere as well, didn’t check.

Maybe copy/pasted a link into fields that should be a URL?

Sorry Ron I am not exactly sure how to do that…I guess it’s not just copying and pasting HTML mark up from blog.html …? I did not understand the part with “PHP calls” and how to do that.