Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Ganta Hemanth
Ganta Hemanth
6,460 Points
Posted by Ganta Hemanth
Ganta Hemanth
6,460 Points

problem with media queries in internet explorer

Hi,

I made a adaptive website. The site is displaying well in all the browsers expect Internet Explorer. Even in the latest version of the Internet Explorer i am having a problem.

The problem is the menu of the site is not being displayed when the browser size is above 768 px. This problem exists only in Internet Explorer.

Bianca Negron
Bianca Negron
9,486 Points
Bianca Negron
Bianca Negron
9,486 Points

Did you set a media query for above 768?

Ganta Hemanth
Ganta Hemanth
6,460 Points
Ganta Hemanth
Ganta Hemanth
6,460 Points

Ya i did.. I found the reason with the help of Chris..

The reason is i used the display: initial; which is not working in the Internet Explorer

1 Answer

Bianca Negron
Bianca Negron
9,486 Points
Bianca Negron
Bianca Negron
9,486 Points

What version of Internet Explorer is it? Media Queries is only supported by IE 9 and above. You can also try adding this into the head section to fix: <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]--> <!-- css3-mediaqueries.js for IE less than 9 --> <!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->

You can also try respond.js to fix the issue if the above doesn't work.

Ganta Hemanth
Ganta Hemanth
6,460 Points
Ganta Hemanth
Ganta Hemanth
6,460 Points

Thanks for the response.

I checked the site in IE 10 and IE 11. The responsiveness of the site is working fine. But the menu is not working well. It is not being displayed once the resolution reaches above 768 px. Frankly i don't the problem, I just assumed it might be media query.

Here is the html code of the menu

<div id="menu"> <div></div> <a href="#"><span>Menu</span><span class="icon-paragraph-justify"></span></a> <ul> <li><a href="#"><span class="icon-home"></span>Home</a></li> <li><a href="#"><span class="icon-briefcase"></span>Services</a></li> <li><a href="#"><span class="icon-globe"></span>Careers</a></li> <li><a href="#"><span class="icon-users"></span>Team</a></li> </ul> </div>

CSS

Below 768px

menu

{ width:100%; }

menu a

{ text-decoration:none; display:block; width:100%; background-image:url('../images/green_cup.png'); background-size:100% 100%; color:black; height:2em; font-size:25px; }

menu > a

{ width:105%; }

menu a>span

{ position:relative; left:1em; line-height:1.7em; }

menu ul

{ width:100%; display:none; margin:0px; padding:0px; position:absolute; z-index:100; }

menu ul>li>a

{ text-decoration:none; }

menu ul>li

{ list-style:none; text-align:center; }

when media query with a min-width 769px is applied

menu > a

{
    display:none;
}   

#menu>ul
{
    display:initial;
    width:85%;
}
#menu>div
{
    display:inline-block;
    width:10%;
    margin-left:-10px;
    height:2.6em;
    border-radius:10px 0px 0px 10px;
}

#menu > ul > li
{
    display:inline-block;
    width:25%;
    font-size:20px;
    margin-right:-7px;
    background:white;
    height:1em;
}
#menu
{
    width:100%;
    display:block;
    margin-left:30px;
}
#menu>ul>li>a
{
    text-align:left;
    display:inline-block;
    width:100%;
    border-left:1px solid rgba(0,0,0,1);
    vertical-align:center;
    transition:color .4s,background-color .4s;
    -webkit-transition:color .4s,background-color .4s;
    background-image:none;
    background-color:#002DB3;
    opacity:1;
    color:white;
    height:1.75em;

} #menu ul>li:last-child>a { width:103%; background-color:#002DB3; border-radius:0px 10px 10px 0px;
} #menu ul>li>a:hover { background-color:rgba(0,0,0,.8); color:#fff; } a:hover > span[class^='icon-']:before { visibility:visible; color:white; }

I used a jquery which is

$('#menu>a').click(function(){ $('#menu ul').slideToggle('slow'); });

I couldn't find the reason behind the error. Sorry for the long code.

Hope you can help me.

Have a nice day..