4 Replies Latest reply: Oct 18, 2012 2:17 PM by Nancy O. RSS

    Responsive Design - Hide DIV in Internet Explorer

    knash82

      I'm building a responsive design site and have multiple Navigation Bars for each screen width. 


      In my CSS depending on screen size I have the navigation bar turned off or hidden display.

       

      Doing this works fine in FireFox, but doesn't in Internet Explorer.  Specifically IE8, but I would like a fix for all IE browsers.

       

       

      /*  THE HTML  */

       

      <nav id="tabletnav">

      <div class="sixteen columns">

      <ul>

      <li><a href="index.html">Home</a></li>

      <li><a href="about.html">About</a></li>

      <li><a href="designs.html">Designs</a></li>

      <li><a href="process.html">Process</a></li>

      <li><a href="contact.html">Contact</a></li>

      </ul>

      </div>

      </nav>

       

      /*  THE CSS */

       

      @media only screen and (min-width: 959px) {

       

      #tabletnav     {

           display:none;

      }

       

      }