My challenge is getting my div elements to float correctly in Internet Explorer. They are displaying perfectly in Chrome and Firefox, but IE seems to be messing up the code. The jsfiddle link showcasing the issue can be found here: http://jsfiddle.net/vlyandra/kEm3R/. Essentially, the image div is not aligning horizontally with the entry div, and the table at the bottom (even though it has a max width) is not resizing as expected. Below is the code used to generate the posts:
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<div class="bordered centered">
<p class="negative-margin alignleft header"><?php the_title(); ?></p><p class="negative-margin alignright date"><?php the_date(); ?></p><div style="clear:both;"></div>
<?php if ( is_search() ) : // Only display Excerpts for Search ?>
<div class="entry-summary">
<?php the_excerpt(); ?>
</div><!-- .entry-summary -->
<?php else : ?>
<div class="entry-content negative-margin">
<?php if ( has_post_thumbnail() ):?>
<div id="entry-left">
<?php $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'large');
echo '<a href="' . $large_image_url[0] . '" title="' . the_title_attribute('echo=0') . '" >';
echo get_the_post_thumbnail($post->ID, 'large');
echo '</a>';?>
</div>
<div class="entry-right">
<?php the_content( __( 'More <span class="meta-nav">→</span>', 'huckleberry' ) ); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'huckleberry' ), 'after' => '</div>' ) ); ?>
</div><div style="clear:both;"></div>
<div class="entry-right">
<table class="fixed-height fixed-width">
<tr>
<td class="valigned"><h3 class="date">Details</h3>
<?php the_field('details');?>
</td>
<td class="valigned">
<a href="<?php echo MultiPostThumbnails::get_post_thumbnail_url(get_post_type(), 'secondary-image');?>">
<?php if (class_exists('MultiPostThumbnails')) : MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'secondary-image'); endif; ?>
</a>
</td>
<td class="valigned">
<a href="<?php echo MultiPostThumbnails::get_post_thumbnail_url(get_post_type(), 'tertiary-image');?>">
<?php if (class_exists('MultiPostThumbnails')) : MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'tertiary-image'); endif; ?>
</a>
</td>
<td class="valigned">
<a href="<?php echo MultiPostThumbnails::get_post_thumbnail_url(get_post_type(), 'fourth-image');?>">
<?php if (class_exists('MultiPostThumbnails')) : MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'fourth-image'); endif; ?>
</a>
</td>
</tr>
</table>
</div>
<?php else : ?>
<?php the_content( __( 'More <span class="meta-nav">→</span>', 'huckleberry' ) ); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'huckleberry' ), 'after' => '</div>' ) ); ?>
</div>
<?php endif; ?>
<?php endif; ?>
Would appreciate any assistance on this matter!