My wordpress theme breaks in Explorer

Hello good friends of stack Overflow. I think this is an issue that any experienced developer can fix in seconds. I am pretty clueless as I'm a filmmaker creating my own website, although I feel pretty proud that I've managed to create a workable wordpress template from scratch. But after two weeks of work, there still is a problem: the fu*** layout breaks completely in explorer and I can't identify what's wrong, as I'm not using any weird java nor obscure css tags. Can anybody help me out here? I'll post the css and the header.php if it is of any help. I thank you all for taking the time to help me out. The site works well on firefox, ipad and chrome. But f*** Explorer (IE6, IE7, IE8) has been impossible to tame. http://estamosobservando.com/

style.css

@media screen {

* { margin: 0; padding: 0; }



article, aside, figure, footer, header, nav, section { display: block; }

.group:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.group { display: inline-block; clear: both; }
/* start commented backslash hack \*/ * html .group { height: 1%; } .group { display: block; } /* close commented backslash hack */


body { font: 16px/1.4 Georgia, "Times New Roman", Times, serif; letter-spacing: -1px; color: #646464; }

/*
    TYPOGRAPHY
*/
h1 {font: 52px arvo, "Times New Roman", Times, serif; font-smooth: always; font-weight:bold; letter-spacing: -1px; color: #191919; }

h2 {font: 30px Terminal Dosis Light, Arial, Helvetica, sans-serif; font-smooth: always; letter-spacing: -1px; color: black; word-spacing:5px; }

h3 {font: 25px Terminal Dosis Light, Arial, Helvetica, sans-serif; font-smooth: always; letter-spacing: -1px; color: gray; }

h4 {font: 20px Terminal Dosis Light, Arial, Helvetica, sans-serif; font-smooth: always; color: gray; }

h5 {font: 16px Avro, "Times New Roman", Times, serif; font-smooth: always; font-weight:bold; color: #333333; }

h6 {font: 14px Terminal Dosis Light, Arial, Helvetica, sans-serif; font-smooth: always; letter-spacing: -1px; color: #ea005e; text-transform:uppercase; }

/*
    THE SITE
*/

a { text-decoration: none; color:inherit}

a:link a:visited, a:active { text-decoration: none; }

a:hover { text-decoration:underline; color: inherit; }

#page-wrap { width:1020px; margin: 0px auto; padding: 0px 0px 50px 0px; background: white; }

header { position: relative; top: 0px; left: 0px; width: 1020px; height:560px; padding: 0px 0px 50px 0px; margin: 0px 0px 0px 0px; }

#blackbar { position: absolute; top:0px; left: 0px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; width: 1020px; height:30px; background-color: #1e1e1e; }

#blackbar ul { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; list-style-type:none; list-style-image:none; }

#blackbar li { margin: 0px 0px 0px 0px; display: inline-block; text-decoration: none; padding: 0px 0px 0px 0px; }

#likeus h4 { position:absolute; top: 0px; left: 790px; }

#likeus h4:hover {color: #1ad4ff; }

nav { position: absolute; top:45px; left: 7px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; width: 1020px; height: 520px; background-color: transparent; }

#navbar ul{ padding: 0px 0px 0px 0px; list-style-type:none; list-style-image:none; }

#navbar li { display: inline-block; padding: 0px 0px 0px 0px; }

#navbar ul li h2:hover { text-decoration:none; }

#home { position: absolute; width: 185px; height: 520px; top: 0px; left: 10px; padding: 0px 0px 0px 0px; background-image:url(images/home-off.jpg); background-repeat:no-repeat; }

#home a:hover { position: absolute; top: 0px; left: 0px; width: 185px; height: 520px; background-image:url(images/home-on.jpg); background-repeat:no-repeat; }

#home h2 { position: absolute; top: 5px; left: 15px; padding: 0px 0px 0px 0px; color: white; }

#pre { position: absolute; width: 185px; height: 520px; top: 0px; left: 205px; padding: 0px 0px 0px 0px; background-image:url(images/pre-off.jpg); background-repeat:no-repeat; }

#pre h2 { position: absolute; top: 5px; left: 15px; padding: 0px 0px 0px 0px; color: white;}

#pre a:hover { position: absolute; top: 0px; left: 0px; width: 185px; height: 520px; background-image:url(images/pre-on.jpg); background-repeat:no-repeat; }

#shoot  { position: absolute; width: 185px; height: 520px; top: 0px; left: 400px; padding: 0px 0px 0px 0px; background-image:url(images/shoot-off.jpg); background-repeat:no-repeat; }

#shoot h2 { position: absolute; top: 5px; left: 15px; padding: 0px 0px 0px 0px; color: white; }

#shoot a:hover { position: absolute; top: 0px; left: 0px; width: 185px; height: 520px; background-image:url(images/shoot-on.jpg); background-repeat:no-repeat; }

#post { position: absolute; width: 185px; height: 520px; top: 0px; left: 595px; padding: 0px 0px 0px 0px; background-image:url(images/post-off.jpg); background-repeat:no-repeat; }

#post h2 { position: absolute; top: 5px; left: 15px; padding: 0px 0px 0px 0px; color: white; }

#post a:hover { position: absolute; top: 0px; left: 0px; width: 185px; height: 520px; background-image:url(images/post-on.jpg); background-repeat:no-repeat; }

#news { position: absolute; width: 185px; height: 520px; top: 0px; left: 790px; padding: 0px 0px 0px 0px; background-image:url(images/news-off.jpg); background-repeat:no-repeat; }

#news h2 { position: absolute; top: 5px; left: 15px; padding: 0px 0px 0px 0px; color: white; }

#news a:hover { position: absolute; top: 0px; left: 0px; width: 185px; height: 520px; background-image:url(images/news-on.jpg); background-repeat:no-repeat; }



#maincontent { margin: 0px 0px 0px 0px; float: right; width:780px; padding: 0px 30px 0px 0px; background-color:white; }

aside { margin: 0px 0px 0px 0px; float: left; width: 200px; padding: 0px 0px 0px 0px; background-color:white; }

#widget { padding: 133px 0px 0px 20px; text-align:left; }

#widget ul {margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; list-style-type:none; list-style-image: none; text-decoration: none;}

#widget li { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; list-style-type:none; list-style-image: none; text-decoration: 开发者_运维知识库none; }


footer { position:relative; width: 1020px; height: 300px; margin: 0px auto; padding: 0px 0px 0px 0px; background-color: #1e1e1e; }

#logo { position: absolute; width: 221px; height: 222px; top: 20px; left: 20px; padding: 0px 0px 0px 0px; background-image:url(images/logo.png); background-repeat:no-repeat;  }

#twittertitle { position: absolute; top: 15px; left: 270px; padding: 0px 0px 0px 0px; }

#twitterbox { position: absolute; top: 50px; left: 270px; padding: 0px 0px 0px 0px; background-image:url(images/twitterbox.png); background-repeat:no-repeat; width: 540px; height: 190px; }

#twinfo { position: absolute; top: 0px; left: 0px; padding: 30px 20px 5px 20px; background:none; width: 500px; height: 190px; }

#twitter_update_list {margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; list-style-type:none; list-style-image: none; text-decoration: none; }

#twitter_update_list a { color: black}

#sociallist { position: absolute; top: 50px; left: 837px; padding: 0px 0px 0px 0px; background-color:#282828; width: 140px; height: 190px; }

#sociallist ul { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; list-style-type:none; list-style-image:none; }

#sociallist li { margin: 0px 0px 0px 0px; text-decoration: none; padding: 0px 0px 0px 0px; }

#sociallist li h3:hover {color: #1ad4ff; }

#facebooklogo { position: absolute; background-position: center; background-image: url(images/facebooklogo.png); background-repeat:no-repeat; width: 26px; height: 26px; top: 18px; right: 10px; }

#facebooklogo h3 { position: absolute; top: 0px; right: 42px; }

#twitterlogo { background-position: center; background-image: url(images/twitterlogo.png); background-repeat:no-repeat; width: 33px; height: 25px; position: absolute; top: 48px; right: 10px; }

#twitterlogo h3 { position: absolute; top: 0px; right: 42px; }

#flickrlogo { background-position: center; background-image: url(images/flickrlogo.png); background-repeat:no-repeat; width: 26px; height: 26px; position: absolute; top: 78px; right: 10px; }

#flickrlogo h3 { position: absolute; top: 0px; right: 42px; }

#vimeologo { background-position: center; background-image: url(images/vimeologo.png); background-repeat:no-repeat; width: 27px; height: 24px; position: absolute; top: 108px; right: 10px; }

#vimeologo h3 { position: absolute; top: 0px; right: 42px; }

#youtubelogo { background-position: center; background-image: url(images/youtubelogo.png); background-repeat:no-repeat; width: 24px; height: 29px; position: absolute; top: 138px; right: 10px; }

#youtubelogo h3 { position: absolute; top: 0px; right: 42px; }

#disclaimer { position: absolute; bottom: 0px; left: 0px; margin: 0px auto; padding: 0px 0px 0px 17px; text-align: left; font-size: 10px; word-spacing: 3px; }

And the header.php:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<head>
    <meta charset="<?php bloginfo('charset'); ?>" />

    <?php if (is_search()) { ?>
       <meta name="robots" content="noindex, nofollow" /> 
    <?php } ?>

    <title>
           <?php
              if (function_exists('is_tag') && is_tag()) {
                 single_tag_title("Tag Archive for &quot;"); echo '&quot; - '; }
              elseif (is_archive()) {
                 wp_title(''); echo ' Archive - '; }
              elseif (is_search()) {
                 echo 'Search for &quot;'.wp_specialchars($s).'&quot; - '; }
              elseif (!(is_404()) && (is_single()) || (is_page())) {
                 wp_title(''); echo ' - '; }
              elseif (is_404()) {
                 echo 'Not Found - '; }
              if (is_home()) {
                 bloginfo('name'); echo ' - '; bloginfo('description'); }
              else {
                  bloginfo('name'); }
              if ($paged>1) {
                 echo ' - page '. $paged; }
           ?>
    </title>

    <link rel="shortcut icon" href="/favicon.ico">

    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">

    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">

    <?php if ( is_singular() ) wp_enqueue_script('comment-reply'); ?>

    <?php wp_head(); ?>
</head>

<link href='http://fonts.googleapis.com/css?family=Arvo:regular,bold' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Terminal+Dosis+Light' rel='stylesheet' type='text/css'>

<body <?php body_class(); ?>>

    <div id="page-wrap" class="group">

        <header>
            <div id="blackbar">
                <ul>
                <li><div id="likeus"><a href="#"><h4>Like us on Facebook!</h4></a></div></li>
                </ul>
            </div> <!-- Fin del blackbar --> 

            <nav>
                <div id="navbar">

                    <ul>

                    <li><div id="home"><a href="<?php echo get_option('home'); ?>/"><h2>Home</h2></a></div></li>

                    <li><div id="pre"><a href="http://estamosobservando.com/category/preproduction/"><h2>Preproduction</h2></a></div></li>

                    <li><div id="shoot"><a href="http://estamosobservando.com/category/the-shoot/"><h2>The Shoot</h2></a></div></li>

                    <li><div id="post"><a href="http://estamosobservando.com/category/postproduction/"><h2>Postproduction</h2></a></div></li>

                    <li><div id="news"><a href="#"><h2>News</h2></a></div></li>

                    </ul> 

                    </div> <!-- Fin del navbar -->                                                                

            </nav>

        </header> <!-- fin del header -->

You are using HTML5 tags which aren't supported by IE.

Just change <header> to <div id="header"> (don't forget the change the closing tag too) and the corresponding CSS rule from header{ to #header{. Do the same for nav, aside and footer. I tried the result in SuperPreview and it looked fine.

EDIT: I noticed that you have different background images for hover but they don't appear. Add this line to make them work:

#navbar a {display:block; width: 100%; height:100%;}