www.webdeveloper.com
Results 1 to 2 of 2

Thread: Thumbnails Not Displaying Correctly

  1. #1
    Join Date
    Aug 2005
    Posts
    23

    Question Thumbnails Not Displaying Correctly

    Hello all,

    I have a question that hopefully will be a quick and obvious answer for you. I always have trouble figuring out which display property to use. I've created a page that has thumbnails that are generated dynamically in wordpress. I want the thumbnails to display in two columns, side-by-side. Currently this is working in some browsers, but in other browsers (I know some versions of IE and slightly older firefox) all thumbnails are displaying as one column.

    Here's the page

    Here's my HTML/PHP:

    Code:
    <?php get_header(); ?>
    
    	<div class="post" id="post-<?php the_ID(); ?>">
    
    	<div class="postheader"></div>
    	
    	<div class="postcontent" style="text-align: center;">
    
    	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    		
    		<a href="<?php the_permalink() ?>">	
    						
    			<div id="postthumb">		
    						
    				<?php if(get_post_meta($post->ID, "thumbnail", true)) {
    				$size = getimagesize(get_post_meta($post->ID, "thumbnail", true)); ?>
    				<img class="thumbs" src="<?php echo get_post_meta($post->ID, "thumbnail", true); ?>" alt="<?php the_title(); ?>" width="<?php echo $size[0]; ?>" height="<?php echo $size[1]; ?>" />
    				<?php } ?>
    			
    				<br />
    				
    				<span class="title">
    					<?php echo get_the_title($post) ?>
    				</span>
    				
    				<br />
    				
    				<span class="client">
    					<?php $client = get_post_meta($post->ID, 'client', true); ?><?php echo $client ?>
    				</span>
    				
    				<br />
    			
    			</div>	
    				
    		</a>
    			
    		<?php endwhile; endif; ?>
    			
    		<!-- If admin is viewing, show edit link -->
    					
    		<?php if ( current_user_can( 'level_7' ) || is_user_logged_in() )  { ?>
    			
    			<br />
    				
    			<?php edit_post_link('Edit this page','','.'); ?>
    		
    			<?php } else {
    	
    				echo '';
    		
    			} ?>
    			
    		</div>
    		
    		<div class="postfooter"></div>
    		
    	</div>
    
    <?php get_footer(); ?>
    Here's the CSS for the thumbnails:

    Code:
    #postthumb						{ display: inline-table; text-align: left; padding: 0 5px 10px; }
    .title								{ font-size: 1.6em; }
    .client							{ padding-bottom: 10px; font-size: 1.2em; }
    .thumbs							{ display: inline; border: 2px solid #948d7d; margin-bottom: 5px; }
    .thumbs:hover					{ border: 2px solid #9d322a; display: inline; margin-bottom: 5px; }
    Not sure if I should be using a different display property, using floats, different padding, or if something I already have in there is just plain wrong. Any help would be much appreciated. You guys have always helped me so much in the past! Thanks.

    -Jon

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Inline element <a> wrapping a block element <div> is invalid, as is the id postthumb.
    Too much use of class and unnecessary use of <br />
    display: inline-table; is not supported in IE, only in IE8

    Try restructuring:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title>Basic HTML</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
    <script type="text/javascript">
    
    </script>
    
    <style type="text/css">
    #postcontent {width:450px;} 
    #postcontent a {width:200px; float:left; margin:10px; text-decoration:none;}
    #postcontent img {display:block; border:1px solid transparent;}
    #postcontent a:hover {color:red; text-decoration:underline;} 
    #postcontent a:hover img {border:1px solid red;} 
    #postcontent span {display:block; font-size:smaller;} 
    </style>
    
    </head>
    <body>
    <div id="postcontent">
        <a href="http://stevenmarcross.com/work/production">	
            <img src="http://stevenmarcross.com/wp-content/uploads/2009/01/productiondv-still1-200x150.png" alt="Production" width="200" height="150" />
            Production
            <span>Bob Evans Restaurants</span>
        </a>
    
        <a href="http://stevenmarcross.com/work/dance">	
            <img src="http://stevenmarcross.com/wp-content/uploads/2009/01/dancedv-still1-199x150.png" alt="Dance" width="199" height="150" />
            Dance
            <span>Blue Cross/ Blue Shield</span>
        </a>
    </div>	
    </body>
    </html>
    At least 98% of internet users' DNA is identical to that of chimpanzees

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles