DIV layers in Internet Explorer…

One would think that I should have conquered this issue already, seeing as every WP theme I’ve ever made has required a special stylesheet for IE.

My website address is: asphyxiate.info.

The problem is one I’ve encountered many times, DIV layers that work perfectly in Firefox… and go haywire in Internet Explorer. My latest theme/project is supposed to be one column centered on the page, with a separate “box” for each post. All I want is a series of blue boxes with white borders. This is how it’s supposed to look: http://i206.photobucket.com/albums/bb15/rustedbrilliant/firefox.png (and it works in Firefox.)

Here’s a screenshot of the same thing in IE. I included a black border around one DIV layer, just for visual reference whenever I edit the CSS. http://i206.photobucket.com/albums/bb15/rustedbrilliant/internetexplorer.png

Both stylesheets (Firefox and IE) proved valid when I checked them here: http://jigsaw.w3.org/css-validator/

Firefox: http://asphyxiate.info/wp-content/themes/testing/style.css
IE: http://asphyxiate.info/wp-content/themes/testing/iestylesheet.css

Here’s the coding in my index template:

<?php include('/home/rustedbr/public_html/asphyxiate/wp-content/themes/testing/header.php'); ?>

<title>&nbsp; &nbsp &nbsp; Asphyxiate ! INFO</title>

<style type="text/css">body{
background-color: #B2D7D3;}
</style>

<!--[if IE]>
<style type="text/css">
.the_content {
margin-top: -19px;
margin-bottom: -19px;
}
</style>
<![endif]-->

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<div class="whitebox">
<div id="bluebox">
<h1><?php the_title(); ?> <?php edit_post_link(__('Edit This')); ?></h1>
<div class="post" id="post-<?php the_ID(); ?>">
<div class="the_content">

<?php cm_the_moods(' and ', '<p><b>Mood:</b> ', '</p>'); ?>

<?php the_content(__('(more...)')); ?>

<h3><div class="feedback">
		 <?php wp_link_pages(); ?>
	<br /></h3></div></div>
<h2><img src="http://asphyxiate.info/!/images/pencil2.gif" border="0"><?php the_date('','',''); ?>
&nbsp;&nbsp; <img src="http://asphyxiate.info/!/images/clock.gif" border="0"><?php the_time() ?>
&nbsp;&nbsp; <img src="http://asphyxiate.info/!/images/file.gif" border="0"><?php the_category(', ') ?>
&nbsp;&nbsp; <img src="http://asphyxiate.info/!/images/heart.gif" border="0"><?php comments_popup_link(__('COMMENT'), __('1 COMMENT'), __('% COMMENTS')); ?></h2>
<?php comments_template(); // Get wp-comments.php template ?>
</div>

<?php endwhile; else: ?>

<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>

<?php posts_nav_link(' — ', __('&laquo; Previous Page'), __('Next Page &raquo;')); ?>
</div></div>

Can someone please tell me what I’m doing wrong? Thanks in advance!