Skip navigation

Dreamweaver

knash82 Calculating status...

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;

}

}

1148 Views 4 Replies Latest reply: Nancy O., Oct 18, 2012 2:17 PM

Replies

Currently Being Moderated

1. SnakEyez02,

Oct 18, 2012 11:15 AM in reply to knash82

Report

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

2. Jon Fritz II,

Oct 18, 2012 11:19 AM in reply to knash82

Report

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

3. knash82,

Oct 18, 2012 11:42 AM in reply to Jon Fritz II

Report

Even if the tag is labeled <div id="tabletnav"> IE still will not hide it with CSS

|
Mark as:
Currently Being Moderated

4. Nancy O.,

Oct 18, 2012 2:17 PM in reply to knash82

Report

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


<style type="text/css">
#tabletnav {display:none}
</style>


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


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

Forum guidelines

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