Content overlaps & attached to sidebar

Resolved

(@jt101)

My content of my blog is stuck to the bottom of my sidebar & overlaps it. You can see it at http://www.thebreadcrumbtrail.org
I don’t know why, but as I’m designing it locally, the Meta section of the sidebar is different. On the website you have “Login”, Valid XHTML, and XFN. But on the local version I have “Site Admin, Logout, Entries RSS, Comments RSS, WordPress.org.” The WordPress.org tab is half covered (overlapped) by the content box, which is much higher up than you can see on my website.
On the website, it at least shows the content stuck at the end of the sidebar.
Any ideas anyone?

Here is the index.php

<?php get_header(); ?>
<!-- container start -->
	<div id="container">
<?php get_sidebar(); ?>

<!-- content start -->
		<div id="content">
		<?php if(have_posts()) : ?>
			<?php while(have_posts()) : the_post(); ?>
			<div class="post_top_frame"></div>
			<div class="post">
				<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
				<div class="postmetadata">Posted in <?php the_category(', ') ?></div>
				<div class="post_date"><?php the_time('m') ?>/<?php the_time('d') ?></div>
				<div class="entry"><?php the_content('[...]'); ?></div>

				<div class="endline"></div>
				<?php the_tags('<p class="tags">Tags: ', ', ', '</p>'); ?>
				<div class="bookmark"><?php include(TEMPLATEPATH . '/bookmark.php'); ?></div>
				<div class="read_comments"><a href="<?php comments_link(); ?>"><img src="<?php bloginfo('stylesheet_directory'); 

?>/images/read_comments.gif" width="144" height="16" alt="read comments" /></a></div>
			</div>
			<div class="post_bottom_frame"></div>
			<?php endwhile; ?>
		<?php wp_pagenavi(); ?>
		<?php else : ?>
			<div class="notfound"><p>Content Not Found!</p><p>Please try again.</p></div>
		<?php endif; ?>

		</div>
        <!-- content end -->
		<div class="endline"></div>
	</div>
<!-- container end -->
<?php get_footer(); ?>

Thanks

Viewing 7 replies - 1 through 7 (of 7 total)

Mark Ratledge

(@songdogtech)

14 years, 5 months ago

You’ve got a bunch of code errors, like missing closing tags: [Invalid] Markup Validation of http://www.thebreadcrumbtrail.org/ – W3C Markup Validator. You can ignore the & and unencoded ampersand errors, but fix your closing tags erros first and your display may fix itself. Scroll down in the validation report to see your source and line numbers.

Thread Starter

jt101

(@jt101)

14 years, 4 months ago

Hi Songdogtech

Thanks, that really helped a lot. It’s worth going through each one, one by one. But I’m stuck on the last major one.

If you run my website http://www.thebreadcrumbtrail.org through the validator now, you’ll see I have 3 errors left. 2 of which are minor. One is about the head. But I can’t determine from the source code which php file it’s referring to and what to do to change it.

The website has changed a bit since I last came on here, but if you load it in IE and Firefox, you’ll clearly see the problem in IE

Any ideas?

Kind regards

Thread Starter

jt101

(@jt101)

14 years, 4 months ago

Ok, I think it’s in Header.php. Here it is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" />
<link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php wp_get_archives('type=monthly&format=link'); ?>
<?php //comments_popup_script(); // off by default ?>
<?php if (is_single() and ('open' == $post-> comment_status) or ('comment' == $post-> comment_type) ) { ?>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/prototype.js.php"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/effects.js.php"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/ajax_comments.js"></script> <?php } ?>
<?php wp_head(); ?>
</head>
<body>
<!-- wrapper start -->
<div id="wrapper"><div id="bottom_frame"><div id="top_frame">
<!-- header start -->
	<div id="header">

<div id="searchform"><?php include(TEMPLATEPATH . '/searchform.php'); ?></div>
		<div id="rss"><a href="<?php bloginfo('rss2_url'); ?>"><img src="<?php 

bloginfo('stylesheet_directory'); ?>/images/screenshot.png" width="150" height="40" alt="RSS" /></a></div>

		<div id="navigation">
			<ul>
				<li><a href="<?php echo get_option('home'); ?>"><img alt="Home" border="0" 

src="./wp-content/themes/Breadcrumb trail/images/pngs/home.png" /></a></li>
				<li><a href="http://localhost/wordpress/?page_id=6"><img alt="Big Blogs" border="0" 

src="./wp-content/themes/Breadcrumb trail/images/pngs/Big Blogs.png" /></a></li>
				<li><a href="http://localhost/wordpress/?page_id=5"><img alt="Travel Guides" 

border="0" src="./wp-content/themes/Breadcrumb trail/images/pngs/Travel Guides.png" /></a></li>
				<li><a href="http://localhost/wordpress/?page_id=10"><img alt="ESE Travel" border="0" 

src="./wp-content/themes/Breadcrumb trail/images/pngs/ESE Travel.png" /></a></li>
				<li><a href="http://localhost/wordpress/?page_id=7"><img alt="Gallery" border="0" 

src="./wp-content/themes/Breadcrumb trail/images/pngs/Gallery.png" /></a></li>
				<li><a href="http://localhost/wordpress/?page_id=9"><img alt="Crumbs About Us" 

border="0" src="./wp-content/themes/Breadcrumb trail/images/pngs/Crumbs About Us.png" /></a></li>
				<li><a href="http://localhost/wordpress/?page_id=298"><img alt="Links" border="0" 

src="./wp-content/themes/Breadcrumb trail/images/pngs/Links.png" /></a></li>
			</ul>
		</div>
</div>
<!-- header end -->

Mark Ratledge

(@songdogtech)

14 years, 4 months ago

Your content skews to the right in Safari, too. Looks like your problem is with <div class="post_top_frame"></div> But I’m not a CSS expert, that’s for sure. Get a fresh copy of the theme you’ve modified and compare the basic loop and CSS with yours and see what the differences are.

I can’t tell what’s wrong with the </head> tag, either, and don’t know if it will affect IE display.

Also, your title “Breadcrumb Trail Travel Blog” has a bad URL, too, from the post itself or from bad code.

Thread Starter

jt101

(@jt101)

14 years, 4 months ago

Actually I’ve discovered if I remove the last (/div), the content shifts back to the top of the page, but still too far to the left, now overlapping the sidebar completely.

Mark Ratledge

(@songdogtech)

14 years, 4 months ago

Do you use Firebug in Firefox? It’s a great way to analyze the CSS and XHTML and see which div is nested in other divs. I think that’s what is going on; you’ve got some divs that are conflicting.

Also, some of your page URLs – like “Big Blogs” – are still pointing to localhost.

Thread Starter

jt101

(@jt101)

14 years, 4 months ago

I think it was two extra DIV’s in the footer. When I got rid of them, the posts area came back up to where it was suppose to be. But wouldn’t have found it without Validator. Thanks Songdogtech!

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Content overlaps & attached to sidebar’ is closed to new replies.

Content overlaps & attached to sidebar

Tags

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics