Firefox renders some posts incorrectly, seemingly at random

  • Hi all.

    I’m currently using WordPress to develop a site for a friend’s project — a sort of online journal for poetry and new media work I guess — and Firefox on both Win and Mac is giving me grief.

    Work is currently grouped into collections and most often represented as a thumbnail with a text rollover effect. See this page here for an example.

    Things look fine on Safari — everything looks horrible in IE at the moment, but I just want to nail this first before I start ironing out that raft of problems — but occasionally in Firefox, whenever I load this page or any other that displays posts in this thumbnail-with-rollover manner, one of these thumbnails will lose the rollover, outline the image, and place the rollover text outside the box in a different (default) style.

    See this screenshot for an example of what I mean (on Win FF2). The thumbnail in the lower left is rendering incorrectly, the one above it demonstrates a successful rollover effect.

    In all cases so far, this rendering problem goes away after the page is refreshed.

    Any ideas?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter Pat Armstrong

    (@poisontofu)

    Sorry to bump, but just in case anyone has any ideas? This still has me stumped.

    I’m not sure if it’s the fault of my still-developing CSS skills or my possibly incorrect use of multiple loops on the page template…

    Code for one of the affected pages is attached below, if it helps.

    <?php get_header(); ?>

<?php if (have_posts()) : ?>
<div class="panelcontainer">
<?php while (have_posts()) : the_post(); ?>

 	<div class="description full" <?php echo c2c_get_custom('Collection_Colour', 'style="background-color:#', ';"', '') ?> >
		<p><?php echo c2c_get_custom('Collection_Description', '', '', '') ?></p>
 	</div>

 	<div class="panel third" style="background-image:<?php echo c2c_get_custom('Collection_Image', 'url(', ')', 'none') ?> ;">
		<h2><?php the_title(); ?><br />
		<?php echo c2c_get_custom('Collection_Subtitle', '<span class="subtitle">', '</span>', '') ?></h2>
	</div>

	<div class="collectioncontents">
		<?php the_content(); ?>
		<hr class="clear" />
		<div class="panelcontainer">
			<?php rewind_posts(); ?>
			<?php query_posts(c2c_get_custom('Collection_Cat_ID', 'cat=', '&showposts=-1', ''));
			/* Get posts from category named in Collection_Cat_ID custom field of Collection post. */ ?>
			<?php $posts = get_posts(c2c_get_custom('Collection_Cat_ID', 'category=', '&numberposts=-1&offset=0', ''));
			foreach ($posts as $post) : start_wp(); ?>
				<div class="singlework">
					<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_author(); ?>: <?php the_title(); ?>">
						<div class="off">
							<img src="<?php echo c2c_get_custom('Work_Image', '', '', '') ?>" alt="<?php the_title(); ?>" />
						</div>
						<div class="on">
							<h3><?php the_author(); ?></h3>
							<h4><?php the_title(); ?></h4>
						</div>
					</a>
				</div>
			<?php endforeach; ?>
		</div>
	</div><!-- end collectioncontents -->
	<?php endwhile; ?>

<?php else : ?>

 	<div class="description full">
		<p>Just press the Back button and everything will be fine.</p>
 	</div>

 	<div class="panel textpanel third">

	<h2>Error 404<br />
	<span class="subtitle">Page Not Found.</h2>
	</div>

	<div class="collectioncontents">
		<div class="panelcontainer">
			<p>Sorry, what you are looking for is not here.</p>
		</div> <!-- end panelcontainer -->
	</div><!-- end collectioncontents -->

<?php endif; ?>
</div><!-- end panelcontainer -->
<?php get_footer(); ?>

    The page seems to be displaying fine for me on Firefox.

    I do see a major coding problem though:

    <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_author(); ?>: <?php the_title(); ?>">
	<div class="off">
		<img src="<?php echo c2c_get_custom('Work_Image', '', '', '') ?>" alt="<?php the_title(); ?>" />
	</div>
	<div class="on">
		<h3><?php the_author(); ?></h3>
		<h4><?php the_title(); ?></h4>
	</div>
</a>

    You’re trying to add a lot of different block-level elements inside of an inline element. You’re putting all that code between:

    <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_author(); ?>: <?php the_title(); ?>">

/* You should not put <div>s and headers here. */

</a>
    Thread Starter Pat Armstrong

    (@poisontofu)

    yeah, i know. it’s to make the text/image rollovers work. i feel a bit uneasy about it, but can’t think of a better, more standards-compliant way to do it yet…

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Firefox renders some posts incorrectly, seemingly at random’ is closed to new replies.