WordPress.org

1. Pat Armstrong
   Member
   Posted 3 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 3 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 3 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 3 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.