Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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

Did you set a media query for above 768?

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

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

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