Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Dropdown fail in ie8

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #150790
    arnolfo
    Participant

    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; }

    #150796
    arnolfo
    Participant

    jurotek

    Will that help with ie8 or with the selectable area?

    a

    #150802
    arnolfo
    Participant

    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.

    #150803
    Paulie_D
    Member

    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

    #150806
    arnolfo
    Participant

    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

    #150807
    arnolfo
    Participant

    Paulie,

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

    a

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.