Forum Moderators: not2easy
The content div slides below the sidebar div.
here is a link to the demo
<snip>
[edited by: swa66 at 10:44 pm (utc) on Nov. 2, 2009]
[edit reason] No links, please see ToS and Forum Charter [/edit]
It could be any of many things.
My recommendation is to strip the HTML and CSS down to the problem itself by commenting out extraneous markup unrelated to the problem. If the fix is not found during this process, post the test ready code that replicates the problem and we will look at the options.
Be sure to declare a DTD and validate the markup. That will avoid, eliminate, or rule out many problems.
HERE IS THE INDEX CODE:
/*<?php get_header(); ?>
<?php get_sidebar(); ?>
<!-- Content -->
<div id="content">
<center>
<a href="http://example.com/" target="_blank"><img src="<?php bloginfo('template_directory');?>/images/sign-up.jpg" alt="Sign Up" border="0" /></a>
</center>
<br /><br />
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<!-- Post -->
<div class="post" id="post-<?php the_ID(); ?>">
<div class="post-title">
<div class="post-date">
<span><?php the_time('d') ?></span>
<?php the_time('M') ?>
</div>
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
Posted by: <?php the_author() ?> <!-- / Category: <?php the_category(', ') ?>-->
</div>
<div class="post-entry">
<?php the_content('more>>'); ?>
</div>
<div class="post-info">
<?php comments_popup_link('Comments (0)', 'Comment (1)', 'Comments (%)'); ?> / <a href="<?php the_permalink() ?>#respond">Add Comment</a>
</div>
</div>
<div class="clear"></div>
<!-- /Post -->
<?php endwhile; ?>
<!-- Navigation -->
<div class="navigation">
<div class="navigation-previous"><?php next_posts_link('« Previous Entries') ?></div>
<div class="navigation-next"><?php previous_posts_link('Next Entries »') ?></div>
</div>
<!-- /Navigation -->
<?php else : ?>
<!-- Post -->
<div class="post">
<div class="post-title">
<h2>Not Found</h2>
</div>
<div class="post-entry">
<p><b>Sorry, but you are looking for something that isn't here.</b></p>
</div>
</div>
<!-- /Post -->
<?php endif; ?>
<div class="clear"></div>
</div>
<!-- /Content -->
<?php get_footer(); ?>
HERE IS THE PAGE CODE:
<?php get_header(); ?>
<?php get_sidebar(); ?>
<!-- Content -->
<div id="content">
<center>
<a href="http://example.com/" target="_blank"><img src="<?php bloginfo('template_directory');?>/images/sign-up.jpg" alt="Sign Up" border="0" /></a>
</center>
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<!-- Post -->
<div class="post" id="post-<?php the_ID(); ?>">
<div class="post-title">
<h2><?php the_title(); ?></h2>
</div>
<div class="post-entry">
<?php the_content('Read <span>more...</span>'); ?>
<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>
</div>
</div>
<!-- /Post -->
<?php endwhile; ?>
<?php else : ?>
<!-- Post -->
<div class="post">
<div class="post-title">
<h2>Not Found</h2>
</div>
<div class="post-entry">
<p><b>Sorry, but you are looking for something that isn't here.</b></p>
</div>
</div>
<!-- /Post -->
<?php endif; ?>
<div class="clear"></div>
</div>
<!-- /Content -->
<?php get_footer(); ?>
AND HERE IS THE SIDE BAR CODE:
<!-- Sidebar -->
<div id="sidebar">
<div class="sidebar-box">
<center><a href="<?php bloginfo('rss_url'); ?>"><img src="<?php bloginfo('template_directory'); ?>/images/rss.jpg" alt="RSS Feed" border="0"></a>
</center>
</div>
<div class="sidebar-box">
<div class="sidebar-ads">
<!--<div class="clear"></div>-->
</div>
</div>
<!--<div class="sidebar-box">
<h3>Pages</h3>
<ul>
<?php wp_list_pages('title_li='); ?>
</ul>
</div>-->
<!--<div class="sidebar-box">
<h3>Categories</h3>
<ul>
<?php wp_list_categories('title_li='); ?>
</ul>
</div>-->
<!--<div class="sidebar-box">
<h3>Archives</h3>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</div>-->
<!--<div class="sidebar-box">
<h3>Blog Roll</h3>
<ul>
<?php wp_list_bookmarks('categorize=0&title_li='); ?>
</ul>
</div>-->
<?php if ( !function_exists('dynamic_sidebar') ¦¦ !dynamic_sidebar(1) ) : ?>
<?php endif; ?>
</div>
<!-- Sidebar -->*/
sorry if my blonde is showing!
[edited by: swa66 at 11:14 pm (utc) on Nov. 2, 2009]
[edit reason] No domainnames please use example.com instead [/edit]
#main
margin:0 auto;
position:relative;
width:869px;
#sidebar
-x-system-font:none;
color:#FFFFFF;
float:left;
font-family:"Century Gothic",Century Gothic;
font-size:14px;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:18px;
width:295px;
#content
float:left;
padding:0 17px 0 16px;
width:521px;
W3C (X)HTML Validator [validator.w3.org]
W3C CSS Validator [jigsaw.w3.org]
...........................
The following is missing opening and closing braces and is not valid:
margin:0 auto;
position:relative;
width:869px;
...........................
-x-system-font:none;
This is a new one. Probably proprietary and safely commented out for now - and hopefully forever. ?
...........................
"Century Gothic" is correct. Century Gothic is not. <family-name> with one or more spaces MUST be enclosed in quotes. Also 'best practice to include <generic-family> as a last option if "Century Gothic" is not available to the user. In this case sans-serif;
font-family: "Century Gothic", sans-serif;
W3C - font-family: [w3.org]
...........................
font: can be shorthanded which makes markup a lot easier to follow:
font: normal normal normal 14px/18px "Century Gothic", sans-serif;
font-size-ajust: none;
NOTE: font-size-adjust; cannot be declared in the shorthand and must be noted separately.
...........................
BTW - The link earlier looked perfectly fine in IE7. No issue at all except that the design is very wide, a trend of concern IMO. Next I will look at the HTML. At first glance, seems to have a lot of junk that needs to be commented out or simply deleted in order to get a cleaner look. No need for all those PHP references. They won't help here; just in the way. Can't rule out that inserted markup from the PHP is the problem.
<edit> Added W3C font-family; link. </edit>
the
margin:0 auto;
position:relative;
width:869px;
has the braces they just don't show up here.
Also thanks for you recommendations for cleaning up the css. I will implement it for sure. and i look forward to seeing what you find in the html.
The content div slides below the sidebar div.
This indicates that you are exceeding width somewhere and the content div gets pushed down. Seems simple enough.
Then - the CSS suggests a wrapper with width: 869px; - no problem.
Then - inside that container, two floated containers at 295px and 521px - no problem.
So - where is the extra width coming from? It's in the HTML somewhere, but if inserted from PHP, no way for me to find.
View a page in your browser.
View the source code.
Work with that, the generated html, not the php code that generates it. [PLEASE: do not post it here, it's going to be way too long and nobody wants to read machine generated code anyway]
Now you can easily follow the pinned posts in the forum on how to reduce this to the minimum code possible that still exhibits the problem (just by removing parts, and checking, every time you remove too much the problem goes away, do this till you can find nothing else to remove without the problem going away and in the mean time it hopefully will have become clear to you what's causing it.)
'#content {
float: left !important;
width: 521px !important;
padding: 0px 17px 0 16px !important;
}'
...reduce this to the minimum code possible that still exhibits the problem...
You may have identified a <div> that is involved with the problem, but it will likely be necessary to work with several pieces of HTML and CSS to fix.
All of that !important is a flag for me. It indicates that somebody has hacking to fix other problems, and know you are perhaps needing to hack some more. Not a good sign. Fixable, as is just about everything, but not something that you want to see.
