JTWilcox
02-21-2009, 03:43 AM
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 (http://stevenmarcross.com/work)
Here's my HTML/PHP:
<?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:
#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
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 (http://stevenmarcross.com/work)
Here's my HTML/PHP:
<?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:
#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