WordPress.org

Ready to get started?Download WordPress

Forums

Firefox renders some posts incorrectly, seemingly at random (4 posts)

  1. Pat Armstrong
    Member
    Posted 6 years ago #

    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?

  2. Pat Armstrong
    Member
    Posted 6 years ago #

    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(); ?>
  3. Justin Tadlock
    Member
    Posted 6 years ago #

    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>
  4. Pat Armstrong
    Member
    Posted 6 years ago #

    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...

Topic Closed

This topic has been closed to new replies.

About this Topic