I've nearly finished a theme for Wordpress for my blog, but I've hit one final snag. The page loads strangely, rendering the content before the containing div shows up beneath it. Sort of as if the content were spilling out of the div it resides in. Once the page has loaded, it displays appropriately, however, for people with slower connections the strange load sequence will look awful.
I figured out that the problem was due to some floats that weren't being cleared properly. Trouble is, when I clear the floats, the sidebars will no longer rest next to the main content, they're shifted down instead, but still floating to the right.
<div id="mpage">
<div id="content">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<span class="post" id="post-<?php the_ID(); ?>">
<div class="post">
<div class="title">
<h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h1>
</div>
<div class="postdata">
<span class="date"><span class="author">Posted by <?php the_author() ?> on</span> <?php the_time('M d, Y') ?> <?php edit_post_link(__('Edit')); ?> // </span>
<span class="category"><?php the_category(', ') ?></span>
</div>
<div class="entry">
<?php the_content('Read the rest of this entry »'); ?>
<span class="comments"><?php comments_popup_link('Leave a comment! ', 'Just 1 comment so far!', '% Comments so far, join the discussion!'); ?></span>
</div>
<?php the_tags( '<p>Tags: ', ', ', '</p>'); ?>
</div>
<?php endwhile; ?>
<div class="navigation">
<div class="alignleft"><?php next_posts_link('Older Posts') ?></div>
<div class="alignright"><?php previous_posts_link('Newer Posts') ?></div>
<div class="clear"></div>
</div>
<?php else : ?>
<h2 class="t-center">Not Found</h2>
<p class="t-center">Sorry, but you are looking for something that isn't here.</p>
<?php endif; ?>
</div>
<div id="sidebars">
<div class="sbar1">
<?php include(TEMPLATEPATH."/sidebar1.php");?>
</div>
<div class="sbar2">
<?php include(TEMPLATEPATH."/sidebar2.php");?>
</div>
</div>
<div class="clear"></div>
</div>
If you pull up the CSS, #content and #sidebars should float next to one another and they do, provided the floats are not cleared. But then the page loads weird. If they're cleared, they won't sit together.
I've been combing through looking for something that I know is wrong, but I just can't find it.
Get rid of the clearleft after #content, since you need #content and #sidebar to act as "columns", they need to be floated against each other, not cleared. You should be able to adjust #sidebar to float left, since it comes after #content, and that's floated left. You can more than likely get rid of clearleft, and just use the clear class right after you #sidebar rule ends so that your #footer can clear both of those floats.
On my computer it only stays like this for a second, but on a slower connection, I'm sure it sits like this for much longer. The thick dark blue border around the top is actually all that has rendered of the containing div that holds the header, the content and the footer. Because of the floats not clearing, it's allowing the content to render before it picks up on it, so all the content has just spilled out.
Well, I tried adding the <script></script> in the head tag, but it didn't solve the problem. It seems as it's loading almost like it would if I'd not cleared a float in the header div, but then it recognizes it and corrects the problem.
Plus, clearing the floats just after closing #content fixes the loading problem completely, it just keeps it from being able to format correctly on the page.
I can't replicate the problem on my end, I'm sure the T1 connection isn't helping. I cleared my cache in IE 7 and FF 2 and can't duplicate it. Is there any specific scenario when it happens? What browsers is it happening on?
Hmm. I'm using Firefox and Safari on this end. I just realized that I'm only able to duplicate it on the live site which I'm viewing using a staging plugin. It supposed that it was because I'm using a fiberoptic internet connection and the staging site had almost nothing to load.
Yeah, I see it now. Is there a bad path somewhere in the code? More importantly, is there anything significantly different between the staging server and the live? Such as configurations? At this point, I'd be more inclined to believe there's something different between the two servers.
No, the staging site and the live site are just independent installations of Wordpress on the same server. The only difference that I can come up with is that the live site has some plugins and widgets that don't exist on the staging site.
Reply With Quote
Bookmarks