Grow your CSS skills. Land your dream job.

[Solved] Dropdown fail in ie8

  • # September 20, 2013 at 11:17 am

    I ran a test on a site I am working on and the main navigation failed to properly show the submenus in Windows XP, IE8. Was wondering where and why it falls apart? Also, in any browser, the main navigation selectable area for the main items are only along the top area of the navigation bar. ie: Try to select the main “about” the user has to move the cursor above the word “About us”.

    Thank you in advance…

    My test site is at http://www.arnolfodesign.com/clients/GMS/

    My navigation code is:

    /* styling the main nav*/

    .navMain > ul > li{ /* will style only the top level li due to the “>” */ list-style: none; display: inline-block; position:relative; }

    .navMain > ul > li > a{ font-family: ‘Cinzel’, serif; font-weight:normal; font-style: normal; color: #FFF; font-size: 20px; text-decoration: none !important; display: block; padding: 6px 22px 5px 22px; }

    .navMain > ul > li:hover, .navMain > ul > li:focus{ background-color: #025578; }

    .navMain li ul{ position:absolute; list-style:none; text-align:center; width: 100%; left:0px; top:16px; font:16px ‘Cinzel’, serif; font-weight:normal; /* This is important for the show/hide CSS animation */ max-height:0px; overflow:hidden; -webkit-transition:max-height 0.6s linear; -moz-transition:max-height 0.6s linear; transition:max-height 0.6s linear; }

    .navMain li:hover ul{ max-height:500px; }

    .navMain li ul li{ background-color:rgba(2,85,120,1); }

    .navMain li ul li a{ padding:9px 6px; color:#fff !important; text-decoration:none !important; display:block; }

    .navMain li ul li:nth-child(odd){ /* zebra stripes */ border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; border-top-color: #0D76A7; border-bottom-color: #0D76A7; }

    .navMain li ul li:hover{ background-color:#444; }

    .navMain li ul li:first-child{ border-radius:0px 0px 0 0; margin-top:25px; position:relative; }

    .navMain li ul li:last-child{ border-bottom-left-radius:6px; border-bottom-right-radius:6px; background-image:url(images/navBot.gif); background-repeat:no-repeat; background-position:top; background-color:#0376a6; height:40px; }

    .navMain .donateBtn {background-color:#0376a6; border-radius:9px; -webkit-border-radius:9px; border-style:solid; border-width:1px; border-color:#0376a6; padding:0px 9px; box-shadow: 0px 0px 6px rgba(0,0,0,.75); -webkit-box-shadow: 0px 0px 6px rgba(0,0,0,.75); -moz-box-shadow: 0px 0px 6px rgba(0,0,0,.75); }

    .navMain a:hover.donateBtn{ background-color:#319ac5; box-shadow: 0px 0px 6px rgba(255,255,255,.75); -webkit-box-shadow: 0px 0px 6px rgba(255,255,255,.75); border-style:solid; border-width:1px; border-color:#FFF; }

    # September 20, 2013 at 11:31 am

    try to add z-index:100; to .navMain li ul if it helps

    # September 20, 2013 at 1:00 pm

    jurotek

    Will that help with ie8 or with the selectable area?

    a

    # September 20, 2013 at 1:32 pm

    Will that help with ie8 or with the selectable area?

    Have you tried anything or not. I can only test it on win8 ie10 with document mode set to ie8

    Try to select the main “about” the user has to move the cursor above the word “About us”.

    I don’t experience this using above

    # September 20, 2013 at 1:55 pm

    Yes, I’ve been testing throughout the day using “Browsershots.com”and a trial run on “Browserstack”

    I’ve discovered that I had left off a backup rgb color on my drop down menus and since ie8 doesn’t understand rgba colors the dropdown menu background was missing-so that was fixed once i added a rgb color

    Also found that the background on my banner needed to be extended a bit due to some weird ie8 thing. – that was fixed.

    Good to hear you do not experience the “no selectable area”. However my cursor does not change to a link cursor until it is above the words “About us”
    Not sure about this one. Happens in Safari and Firefox/mac.

    Thanks for checking, really appreciate it.

    # September 20, 2013 at 1:56 pm

    I’m going to lay odds it’s the positioning of the submenus

    .navMain li ul{
    position:absolute;
    list-style:none;
    text-align:center;
    width: 100%;
    left:0px;
    top:16px; <-----
    

    Then you probably can fix this

    .navMain li ul li:first-child {
    border-radius: 0px 0px 0 0;
    margin-top: 25px; <----
    position: relative;
    

    Here’s my reference copy:

    http://codepen.io/Paulie-D/pen/22c4ca602bda363099133ded6bca2294

    # September 20, 2013 at 2:52 pm

    I had little time at work to take closer look with dev tools, so here’s my recommendations

    .navMain {
    width: 916px;
    height: 40px; <--remove, let content determine height
    margin: 0 auto 0 auto;
    text-align: center;
    background-color: #0c293a;
    }
    
    .navMain li ul li:first-child {
    border-radius: 0px 0px 0 0;
    margin-top: 25px; <-- remove, not needed
    position: relative;
    }
    
    .navMain li ul {
    position: absolute;
    list-style: none;
    text-align: center;
    width: 100%;
    left: 0px;
    top: 100%; <-- is 16px should be 100%
    font: 16px 'Cinzel', serif;
    font-weight: normal;
    max-height: 0px;
    overflow: hidden;
    -webkit-transition: max-height 0.6s linear;
    -moz-transition: max-height 0.6s linear;
    transition: max-height 0.6s linear;
    }
    
    # September 20, 2013 at 4:06 pm

    jurotek,

    Ah I see. Your have cleared up that issue completely. I will have more time on Monday to text on various platforms.

    Thank you, and enjoy your weekend!

    a

    # September 20, 2013 at 4:08 pm

    Paulie,

    You are right, as jurotek pointed out as well. Thank you for taking a look too!

    a

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".