IE 8 Background Color is Wonky - css

Question

My website, HeelsFirstTravel.com has an issue when someone views an individual post in IE 8 only.
The hot pink box in the upper right hand of the posts ( http://www.heelsfirsttravel.com/2013/07/09/another-reason-to-go-to-vegas-bacon-edition/ ) bleeds into the entire background in IE 8 only.
I've tried actively setting the background to white, but this makes no difference.
Any idea how I can fix in this one browser while preserving the box?
Edit: A user insists this only started a few days ago, which has me scratching my head even more. Nothing really changed!
Thanks!
-Jeanne
<?php get_header(); ?>
<?php $template = get_post_meta($post->ID, 'wpzoom_post_template', true);?>
<div id="main"<?php
if ($template == 'side-left') {echo' class="sidebar-reversed"';}
if ($template == 'full') {echo' class="full-width full-width-post"';}
?>>
<?php while (have_posts()) : the_post(); ?>
<div id="content">
<div class="single-content">
<h1 class="title"><?php the_title(); ?></h1>
<p class="postmeta"><?php if (option::get('post_category') == 'on') { ?><span class="category"><?php _e('In ', 'wpzoom'); the_category(', '); $prev = TRUE; ?></span><?php } ?>
<?php if (option::get('post_author') == 'on') { if ($prev) {echo ' / '; } ?><span class="author"><?php _e('By', 'wpzoom'); ?> <?php the_author_posts_link(); $prev = TRUE; ?></span><?php } ?>
<?php if (option::get('post_date') == 'on') { if ($prev) {echo ' / '; } ?><time datetime="<?php the_time("Y-m-d"); ?>" pubdate><?php the_time("j F Y"); ?></time><?php $prev = TRUE; } ?>
<?php if (option::get('post_comments') == 'on') { if ($prev) {echo ' / '; } ?><?php comments_popup_link( __('0 comments', 'wpzoom'), __('1 comment', 'wpzoom'), __('% comments', 'wpzoom'), '', __('Comments are Disabled', 'wpzoom')); }
edit_post_link( __('Edit post', 'wpzoom'), ' / ', ''); ?></p>
<?php if (option::get('post_share') == 'on') { ?>
<div class="divider social">
<span class="share_btn"><iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&layout=button_count&show_faces=false&width=80&action=like&font=arial&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe></span>
<span class="share_btn">Tweet<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></span>
<div class="cleaner"> </div>
</div><!-- end .divider .social -->
<?php } ?>
<?php
$videoEmbedCode = get_post_meta($post->ID, 'wpzoom_post_embed_code', true); // get video embed code
if ($videoEmbedCode)
{
$videowidth = 630;
$videoheight = 360;
if (strlen($videoEmbedCode) > 10){
$videoEmbedCode = preg_replace("/(width\s*=\s*[\"\'])[0-9]+([\"\'])/i", "$1 $videowidth $2", $videoEmbedCode);
$videoEmbedCode = preg_replace("/(height\s*=\s*[\"\'])[0-9]+([\"\'])/i", "$1 $videoheight $2", $videoEmbedCode);
$videoEmbedCode = str_replace("<embed","<param name='wmode' value='transparent'></param><embed",$videoEmbedCode);
$videoEmbedCode = str_replace("<embed","<embed wmode='transparent' ",$videoEmbedCode);
echo "<div class=\"video\">$videoEmbedCode</div>"; ?>
<?php
} // if strlen of video > 10
} // if video ?>
<?php the_content(); ?>
<div class="cleaner"> </div>
<?php wp_link_pages(array('before' => '<p class="pages"><strong>'.__('Pages', 'wpzoom').':</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
<?php if (option::get('post_tags') == 'on') { ?><?php the_tags( '<p class="tags"><strong>'.__('Tags', 'wpzoom').':</strong> ', ', ', '</p>'); } ?>
<div class="cleaner"> </div>
<?php if (option::get('post_share') == 'on') { ?>
<div class="divider social">
<span class="share_btn"><iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&layout=button_count&show_faces=false&width=80&action=like&font=arial&colorscheme=light&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowTransparency="true"></iframe></span>
<span class="share_btn">Tweet<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></span>
<div class="cleaner"> </div>
</div><!-- end .divider .social -->
<?php } ?>
</div><!-- end .single-content -->
<div class="cleaner"> </div>
<?php if (option::get('post_related') == 'on') {
if ($template == 'full') {
get_template_part('related-posts', 'full');
}
else {
get_template_part('related-posts');
}
} ?>
<?php if (option::get('post_comments') == 'on') { ?>
<div class="widget">
<p class="title title-medium border-dotted"><span><?php _e('discuss','wpzoom');?></span> <?php _e('this post','wpzoom');?></span></p>
<div id="comments">
<?php comments_template(); ?>
</div>
</div><!-- end .widget -->
<?php } ?>
<div class="cleaner"> </div>
</div><!-- end #content -->
<?php if ($template != 'full') { ?>
<aside>
<?php get_sidebar(); ?>
</aside>
<?php } ?>
<?php endwhile; ?>
<div class="cleaner"> </div>
</div><!-- end #main -->
<?php get_footer(); ?>

Answer 1

It looks like the issue is IE8 is getting confused by your markup. If you fire up Developer Tools, you will see that your aside element is being registered as a self-closing, empty element ( <aside /> ). That means the stuff you want inside your aside is now outside your aside and bleeding into the page.
Somewhere in your aside, there is likely some markup that is borking IE8's markup parser. I can't stress how important it is to ensure your markup and CSS validate. Check out the following sites, they are your friends:
http://validator.w3.org/
http://jigsaw.w3.org/css-validator/

Answer 2

Your problem is that you're using modern HTML5 elements that IE8 doesn't understand.
Elements like <header> and <aside> weren't invented when IE8 was released, and the browser doesn't work properly with them by default. The effects you're seeing are typical of the sort of things that happen in IE8 when you use HTML5 elements.
Fortunately, there is a solution, in the form of html5shiv. This is a small Javascript hack that fixes IE8 so that it accepts modern HTML5 tags as valid HTML. (it doesn't add any extra functionality to the browser; it just makes tags like <aside> work in old IE versions).
Add this script to the top of your page (preferably in an IE8-specific block so that it doesn't get loaded by other browsers), and the page should magically start working.
An alternative to html5shiv is the well-known Modernizr library. This includes the html5shiv functionality, but also provides additional features for helping you get your site working in old browsers without compromising on new features.
One final thing: I notice that although your page's DOCTYPE is set to the HTML5 doctype, your page also includes a reference to xhtml namespaces in the <html> element. I'm not quite sure why your page does this; I don't think it should cause a problem, but equally, it isn't really properly valid code.
Hope that helps.