title: Internet explorer versions >8 compatibility issues, not working with meta code too
body: <p>I have of compatibility issue of my website working on internet explorer versions 9 and above only. I searched the net but I got no answer. I got something close, if I add this line:</p>
  
  <pre><code>&lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;
  </code></pre>
  
  <p>The website works on Internet version 8 and below, but not on 9 and above. And if i remove it, it goes the other way round (works on internet versions 9 &amp; above but not 8 &amp; below).</p>
  
  <p><strong>html:</strong></p>
  
  <pre><code>&lt;html&gt;
  
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
      &lt;link rel="stylesheet" type="text/css" href="main css.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="top nav css.css"&gt;
      &lt;title&gt;Universal Stationary&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;center&gt;
  
      &lt;div class=transbox&gt;  
  
          &lt;table border="0" cellpadding="3" cellspacing="5" cols="2" width="100%" height="100%"&gt;
              &lt;tr align="center"&gt;
                  &lt;td height="15%"&gt;&lt;img src="banner.gif" width="90%"/&gt;&lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr height="1%"&gt;
                  &lt;td colspan="2"&gt;
                      &lt;div class="example"&gt;
                          &lt;ul id="navigationbar"&gt;
                              &lt;li&gt;&lt;a href="homepage/home.html" target="mainframe"&gt;Home&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="productspage.html" target="mainframe"&gt;Products&lt;/a&gt;
                                  &lt;ul&gt;
                                      &lt;li&gt;&lt;a href="penbrand/penbrands.html" target="mainframe"&gt;Pens&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="pencilbrand/pencilbrand.html" target="mainframe"&gt;Pencils&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="staplerbrands/staplerbrand.html" target="mainframe"&gt;Staplers&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="sharpenerbrand/sharpenerbrand.html" target="mainframe"&gt;Sharpeners&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="eraserbrand/eraserbrand.html" target="mainframe"&gt;Erasers&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="photocopypaperbrands/photocopypaperbrand.html" target="mainframe"&gt;Photocopy Papers&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="cartridgebrand/cartridgebrand.html" target="mainframe"&gt;Cartridges&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/li&gt;
                              &lt;li&gt;&lt;a href="comparepage/comparepage.html" target="mainframe"&gt;Compare&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="dealofthemonthpage/dealofthemonthpage.html" target="mainframe"&gt;Free Monthly Coupons&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="aboutuspage/aboutus.html" target="mainframe"&gt;About Us&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="contactuspage/contactus.html" target="mainframe"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="feedbackpage/feedback.html" target="mainframe"&gt;Feedback&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td align="center" colspan="2" height="*"&gt;
                      &lt;iframe src="homepage/home.html" height="100%" width="100%" frameborder="0" name="mainframe"&gt;&lt;/iframe&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
      &lt;br&gt;
              &lt;tr&gt;
                  &lt;td align="center" colspan="2" height="11%"&gt;&lt;p align="left"&gt;Our Brands:&lt;/p&gt;
                      &lt;marquee direction="left" behavior="alternate"&gt;
                          &lt;img src="brands/3m_logo_19.jpg"/&gt;&amp;nbsp; &amp;nbsp;
                          &lt;img src="brands/bic_18.jpg"/&gt;&amp;nbsp; &amp;nbsp;
                          &lt;img src="brands/canon_logo_21.jpg"/&gt;&amp;nbsp; &amp;nbsp;
                          &lt;img src="brands/casio_27.jpg"/&gt;&amp;nbsp; &amp;nbsp;
                          &lt;img src="brands/citizen_74.jpg"/&gt;&amp;nbsp; &amp;nbsp;
                          &lt;img src="brands/double-a-logo+slogan_30.jpg"/&gt;&amp;nbsp; &amp;nbsp;
                          &lt;img src="brands/epson_64.jpg"/&gt;&amp;nbsp; &amp;nbsp;
                          &lt;img src="brands/hp_logo_39.jpg"/&gt;&amp;nbsp; &amp;nbsp;
                          &lt;img src="brands/logo_paperone_putih_38.jpg"/&gt;&amp;nbsp; &amp;nbsp;
                          &lt;img src="brands/max-logo_37.jpg"/&gt;&amp;nbsp; &amp;nbsp;
                          &lt;img src="brands/pelikan_41.jpg"/&gt;&amp;nbsp; &amp;nbsp;
                          &lt;img src="brands/stz_51.jpg"/&gt;&amp;nbsp; &amp;nbsp;
                      &lt;/marquee&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
  
      &lt;/div&gt; 
  
  &lt;/center&gt;
  &lt;/body&gt;
  
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>body {
      background-image:url(background.jpg);
      background-size:cover;
      height:auto;
      width:auto;
  }
  
  div.transbox{
      width:inherit;
      height:1450px;
      margin-top:5px;
      margin-left:70px;
      margin-right:70px;
      margin-bottom:50px;
      padding-bottom:10px;
      padding-left:10px;
      padding-right:10px;
      padding-top:0px;
      border: 1px solid black;
      background-color:rgba(230,230,255,.9);
      filter:alpha(opacity=90);
      display: table;
  }
  
  iframe{
      min-height:1000px !important;   
  }
  </code></pre>
  
  <p><strong>TOP NAVIGATION MENU CSS:</strong></p>
  
  <pre><code>/* main styles */
  #navigationbar {
      display:table;
      width:1000px;
      margin:0 auto;
      padding:0;
      background:#00C;
  
      border-radius:10px;
      -moz-border-radius:10px;
      -webkit-border-radius:10px;
      box-shadow:0 2px 2px rgba(0,0,0, .5);
      -moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
      -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);
  }
  #navigationbar li {
      margin-left:26px;
      margin-bottom:5px;
      margin-top:5px;
      float:left;
      position:relative;
      list-style:none;
  }
  #navigationbar a {
      font-weight:bold;
      color:#e7e5e5;
      text-decoration:none;
      display:block;
      padding:5px 15px;
      clear:both;
      font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
  
      border-radius:10px;
      -moz-border-radius:10px;
      -webkit-border-radius:10px;
      text-shadow:0 2px 2px rgba(0,0,0, .7);
  }
  
  /* onselect menu element */
  #navigationbar .current a, #navigationbar li:hover &gt; a {
      background:#09F;
      color:#000;
      border-top:1px solid #f8f8f8;
  
      box-shadow:0 2px 2px rgba(0,0,0, .7);
      -moz-box-shadow:0 2px 2px rgba(0,0,0, .7);
      -webkit-box-shadow:0 2px 2px rgba(0,0,0, .7);
      text-shadow:0 2px 2px rgba(255,255,255, 0.7);
  }
  
  /* sub-levels */
  #navigationbar ul li:hover a, #navigationbar li:hover li a {
      background:none;
      border:none;
      color:#000;
  }
  #navigationbar ul li a:hover {
      background:#00C;
      color:#fff;
  
      border-radius:10px;
      -moz-border-radius:10px;
      -webkit-border-radius:10px;
      text-shadow:0 2px 2px rgba(0,0,0, 0.7);
  }
  
  #navigationbar ul li:first-child &gt; a {
      -moz-border-radius-topleft:10px;
      -moz-border-radius-topright:10px;
      -webkit-border-top-left-radius:10px;
      -webkit-border-top-right-radius:10px;
  }
  #navigationbar ul li:last-child &gt; a {
      -moz-border-radius-bottomleft:10px;
      -moz-border-radius-bottomright:10px;
      -webkit-border-bottom-left-radius:10px;
      -webkit-border-bottom-right-radius:10px;
  }
  
  /* drop-down menu */
  #navigationbar li:hover &gt; ul {
      opacity:1;
      visibility:visible;
  }
  #navigationbar ul {
      opacity:0;
      visibility:hidden;
      padding:0;
      width:175px;
      position:absolute;
      background:#09F;
      border:1px solid #7788aa;
      display: table; 
      margin: 0 auto;
  
      border-radius:10px;
      -moz-border-radius:10px;
      -webkit-border-radius:10px;
      box-shadow:0 2px 2px rgba(0,0,0, .5);
      -moz-box-shadow:0 2px 2px rgba(0,0,0, .5);
      -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);
  
      -moz-transition:opacity .25s linear, visibility .1s linear .1s;
      -webkit-transition:opacity .25s linear, visibility .1s linear .1s;
      -o-transition:opacity .25s linear, visibility .1s linear .1s;
      transition:opacity .25s linear, visibility .1s linear .1s;
  }
  #navigationbar ul li {
      float:none;
      margin:0;
  }
  #navigationbar ul a {
      font-weight:normal;
      text-shadow:0 2px 2px rgba(255,255,255, 0.7);
      font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
  }
  #navigationbar ul ul {
      left:160px;
      top:0px;
  }
  </code></pre>
  
  <p>Two problems:</p>
  
  <ol>
  <li>Compatibility issues on IE</li>
  <li>The top navigation drop-down list doesn't work on IE</li>
  </ol>