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!

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

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.

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 

$('#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..

1 Answer

Chris Shaw
Chris Shaw
26,663 Points
Chris Shaw
Chris Shaw
26,663 Points

Hi Ganta,

Looking at your CSS you have a selector in which hides all your anchor links which if your media is executing this at 769px and higher it explains why your navigation seems to disappear, disable this selector and your navigation should once again appear but I feel you have it in the wrong media query as typically you want to hide things on smaller devices rather than larger devices.

#menu > a
{
  display:none;
}
Ganta Hemanth
Ganta Hemanth
6,460 Points
Ganta Hemanth
Ganta Hemanth
6,460 Points

Hi Chris,

The above piece of code only hides the anchor tag which is direct child of the #menu. So , as far as i know, it should not hide the anchor tags in the ul. Am i wrong??

Chris Shaw
Chris Shaw
26,663 Points
Chris Shaw
Chris Shaw
26,663 Points

That's correct, the point I'm making is because you're hiding them within your min-width: 769px media query it's making your #menu element appear as if it's not there because your styles rely on the anchors.

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

Then why is it being displayed in all the browsers expect IE??

Chris Shaw
Chris Shaw
26,663 Points
Chris Shaw
Chris Shaw
26,663 Points

It shouldn't be working in other browsers either based on how you've explained things above, without access to your full source my conclusion remains the same.

Chris Shaw
Chris Shaw
26,663 Points
Chris Shaw
Chris Shaw
26,663 Points

Hi Ganta,

First of all sorry for the delayed reply and secondly for making an incorrect assumption, at first I didn't scan your CSS properly but with the source you provided which I removed to keep the post clean I found the below CSS was the cause of the issue.

#menu>ul
{
    display:initial;
    width:85%;
}

The value initial doesn't work in IE and I'm still trying to work out why since it's perfectly valid, however in saying that changing it to block fixes the problem.

#menu>ul
{
    display:block;
    width:85%;
}

Again sorry for rushing to judgement and hope that helps =)

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

Thanks for the reply.. You helped me to complete my project!! I am greateful for that.

Sorry for the untidy code. The code is indented well in my text editor but when i posted it in the forum it appeared untidy.

Could you say me how to post my code in the forums tidily?

Chris Shaw
Chris Shaw
26,663 Points
Chris Shaw
Chris Shaw
26,663 Points

No worries, you can see how to post code on the forum using the below link.

https://teamtreehouse.com/forum/posting-code-to-the-forum

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

Thank You.. There two more bugs in the code i sent you.

1.. carousel code works fine for 5 to 10 min. After that the images in the carousel repeat themselves. Do you know how to solve the problem?

I checked my Jquery code but it is all fine. I read from google that there is some problem in fadeIn and fadeOut functions in Jquery. To which extent is this true??

2.. When the browser is resized , i.e the width reaches 769px , the menu appears below the image. But It should appear on the side of it. What is the reason for such behaviour??