Skip navigation
Currently Being Moderated

Responsive Design - Hide DIV in Internet Explorer

Oct 18, 2012 11:10 AM

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">


<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>





/*  THE CSS */


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


#tabletnav     {





  • Currently Being Moderated
    Oct 18, 2012 11:15 AM   in reply to knash82

    IE8 and below do not honor media queries in CSS. You can create IE only CSS for those old versions but nothing responsive: .

    Mark as:
  • Currently Being Moderated
    Oct 18, 2012 11:19 AM   in reply to knash82

    Versions of IE < 9 don't understand HTML5 tags without adding the HTML 5 shiv


    You are currently using an html5 tag <nav> that those browsers won't understand so you'll need to give them a hand.

    Mark as:
  • Currently Being Moderated
    Oct 18, 2012 2:17 PM   in reply to knash82

    Use an IE conditional comment in the <head> of your HTML document, below all other stylesheet links and embedded CSS styles.


    <!--[if IE ]>-->

    <style type="text/css">

    #tabletnav {display:none}




    Alternatively, you could replace that style in the conditional comment with a link to your IE-only.css file. 


    <!--[if IE ]>-->

    <link href="path/IE-only.css" rel="stylesheet" type="text/css" media="screen">



    Personally, I prefer using an IE-only.css file to cover all the IE exceptions.



    Nancy O.

    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points