title: Website looks good in all browsers and versions except IE7
body: <p>I have energyshop.se which looks good in Chrome, IE8-9, Firefox but not in IE7 as one of my friends noticed. There both menu and footer are not longer horizontal but vertical.</p>
  
  <p>How do I solve this?</p>
  
  <p>Here are CSS for my topmenu in the header and footermenu:</p>
  
  <pre><code>#main_menu {
  font-family:Calibri;
  font-size:24px;
  background-color:#1ca46e;
  height:45px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  width:850px;
  margin-left:22px;
  margin-bottom: -35px;
  margin-top: -30px;
  top:100px;
  }
  
  #main_menu a {
      color:#ffffff;
      height: 10px;
      display: block;
      float: left;
      width: 105px;
      text-align: center;
      margin-top: 8px;
      margin-right: 10px;
      margin-bottom: 0;
      margin-left: 2px;
      background-color:#1ca46e;
      border-top-width: 1px;
      border-right-width: 3px;
      border-bottom-width: 1px;
      border-left-width: 1px;
      border-top-style: none;
      border-right-style: solid;
      border-bottom-style: none;
      border-left-style: none;
      border-right-color: white;
      padding-top: 2px;
      padding-right: 12px;
      padding-bottom: 2px;
      padding-left: 5px;
      font-family: Calibri;
      vertical-align: middle;
      height:28px;
  }
  
  #main_menu a:hover {
      color:#555;
  }
  
  #main_menu li.current-menu-item a {
      text-decoration:underline;
      font-weight:bold;
      text-shadow: 2px 2px #403F40;
      }
  
  #footer_menu {
      position:relative;
      text-align:center;
      height:75px;
      font-family:Calibri;
      margin-top:25px;
      margin-left:50px;
      color:#9221a6;
      font-size:22px;
      font-weight: bolder;
  }
  #footer_menu a {
      margin:5px; 
      margin-top:5px;
      margin-bottom:5px;
      color: #9221a6;
      float:left;
  }
  </code></pre>