Skip navigation
knash82
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">

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

}

 

}

 
Replies
  • 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: http://css-tricks.com/how-to-create-an-ie-only-stylesheet/ .

     
    |
    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 http://code.google.com/p/html5shiv/

     

    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}

    </style>

    <!--<![endif]-->

     

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

    <!--<![endif]-->

     

    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