title: css Works fine with Firefox/Chrome but not with IE
body: <p>I have this HTML and css and works fine in chrome/firefox but on IE the header layout is over place and sub menu is not displayed on hover, can you help please:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
      &lt;title&gt;title&lt;/title&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
      &lt;meta name="viewport" content="width=1024" /&gt;
      &lt;meta name="description" content="" /&gt;
      &lt;meta name="robots" content="all" /&gt;
      &lt;link href="images/favicon.ico" type="image/x-icon" rel="icon" /&gt;&lt;link href="images/favicon.ico" type="image/x-icon" rel="shortcut icon" /&gt;     
      &lt;link rel="stylesheet" type="text/css" href="css/style.css" /&gt;
  
      &lt;/head&gt;
  
      &lt;body&gt;
       &lt;div id="page"&gt;
          &lt;div id="header"&gt;
              &lt;div class="content"&gt;
                  &lt;div id="logo"&gt;
                      &lt;a href="/"&gt;&lt;img src="images/logo.gif" title="" alt="" /&gt;&lt;/a&gt;
                  &lt;/div&gt;
  
                  &lt;div class='cssmenu'&gt;
                      &lt;ul&gt;
                         &lt;li class='active'&gt;&lt;a href='index.html'&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                         &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;Products&lt;/span&gt;&lt;/a&gt;
                            &lt;ul&gt;
                               &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;Product 1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                               &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;Product 2&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                            &lt;/ul&gt;
                         &lt;/li&gt;
                         &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;About&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                         &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;Contact&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                             &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;About&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                         &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;Contact&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                         &lt;li&gt;&lt;a href='#'&gt;&lt;span&gt;Contact&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div id="sub_header"&gt;
              &lt;div class="content"&gt;
                  &lt;div class="content_l"&gt;
                      &lt;span id="sub_head_title"&gt;Welcome&lt;/span&gt;
                  &lt;/div&gt;
                  &lt;div class="content_r"&gt;
                      &lt;span&gt;
                      Call
                      &lt;strong&gt;000000000000&lt;/strong&gt;
                      &lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
         &lt;/div&gt;   
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>And css is :</p>
  
  <pre><code>* html .clearfix, 
  * html #main_panel {
    height: 1%;
    overflow: hidden;
  }
  
  /* float clearing for IE7 */
  *+html .clearfix {
    min-height: 1%;
  }
  
  /* float clearing for everyone else */
  .clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
    font-size: 0;
  }
  
  html, body { 
  background: #e5e5e5; 
  font-size: 13px; 
  }
  
  #header { 
      background: transparent url(../images/header-bg.jpg) repeat-x; height: 60px;
  }
  
  #header .content, #sub_header .content { 
  overflow: visible; position: relative; 
  }
  
  #header .content, #sub_header .content {
      overflow: visible;
      position: relative;
  }
  
  div.content {
      margin: 0 auto;
      overflow: hidden;
      width: 980px;
  }
  
  #logo { 
  position: absolute; 
  }
  
  #logo { margin: 8px 0 8px 0; }
  #logo a { border: none; }
  
  #page #sub_header {
      margin-bottom: 0;
  }
  
  #sub_header {
      line-height: 49px;
  }
  
  #sub_header {
      background: none repeat scroll 0 0 #EEEEEE;
      border-bottom: 1px solid #DDDDDD;
      margin-bottom: 30px;
      overflow: hidden;
  }
  
  .content_l {
      float: left;
      overflow: hidden;
      width: 50%;
  }
  
  .content_r {
      float: right;
      text-align: right;
      width: 50%;
  }
  
  #sub_header span {
      color: #2D2D2D;
      line-height: 49px;
  }
  
  #sub_head_title {
      font: bold 21px Arial;
      text-shadow: 2px 2px 2px #FFFFFF;
  }
  
  a.header_button_children span {
      background: url("../images/header-children-off.gif") no-repeat scroll right -51px transparent;
      padding-right: 25px;
  }
  a.header_button span {
      height: 19px;
      padding: 8px 10px 3px;
  }
  
  /*css Menu ................*/
  
  .cssmenu{
      border:none;
      border:0px;
      margin:0;
      padding:0px;
      font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
      font-size:14px;
      font-weight:bold;
      position: absolute;
      right: 0;
      }
  .cssmenu ul{
      background:#333333;
      height:35px;
      list-style:none;
      /*margin:0 0 0 287px;*/
      margin:0;
      padding:0;
      }
  .cssmenu li{
      float:left;
      padding:0px;
      }
  .cssmenu li a{
      background:#333333 url('../images/seperator.gif') bottom right no-repeat;
      color:#cccccc;
      display:block;
      font-weight:normal;
      line-height:35px;
      margin:0px;
      padding:0px 25px;
      text-align:center;
      text-decoration:none;
      }
  .cssmenu li a:hover, .cssmenu ul li:hover a{
      background: #2580a2 url('../images/hover.gif') bottom center no-repeat;
      color:#FFFFFF;
      text-decoration:none;
      }
  .cssmenu li ul{
      background:#333333;
      display:none;
      height:auto;
      padding:0px;
      margin:0px;
      border:0px;
      position:absolute;
      width:225px;
      z-index:200;
      /*top:1em;
      /*left:0;*/
      }
  .cssmenu li:hover ul{
      display:block;
  
      }
  .cssmenu li li {
      background:url('../images/sub_sep.gif') bottom left no-repeat;
      display:block;
      float:none;
      margin:0px;
      padding:0px;
      width:225px;
      }
  .cssmenu li:hover li a{
      background:none;
  
      }
  .cssmenu li ul a{
      display:block;
      height:35px;
      font-size:12px;
      font-style:normal;
      margin:0px;
      padding:0px 10px 0px 15px;
      text-align:left;
      }
  .cssmenu li ul a:hover, .cssmenu li ul li:hover a{
      background:#2580a2 url('../images/hover_sub.gif') center left no-repeat;
      border:0px;
      color:#ffffff;
      text-decoration:none;
      }
  .cssmenu p{
      clear:left;
      }   
  
  /*End of css Menu ................  */
  </code></pre>