Having some trouble with properly clearing floats
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.
Here's the staging page:
Here's the markup for the main template page:
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.
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<span class="post" id="post-<?php the_ID(); ?>">
<h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h1>
<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>
<?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>
<?php the_tags( '<p>Tags: ', ', ', '</p>'); ?>
<?php endwhile; ?>
<div class="alignleft"><?php next_posts_link('Older Posts') ?></div>
<div class="alignright"><?php previous_posts_link('Newer Posts') ?></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; ?>
I've been combing through looking for something that I know is wrong, but I just can't find it.
I'm hoping someone can give me a hand with this.
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.
That resolves the problem of where the columns fall, but it brings back the problem of the awkward page rendering.
Here's a picture of the page rendering:
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.
Any more ideas of what could be wrong here?
Sounds like it could be a case of Flash of Unstyled Content.
One quick fix (albeit not the best) is to add a blank <script></script> just before the closing </head> tag.
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.
Here's the live site with the staging theme:
It could also be something in the sidebars. I looked through the installed widgets and didn't see any problem there. Maybe I missed something.
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.
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
Tags for this Thread