[Solved] Dropdown fail in ie8

[arnolfo]

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

[arnolfo]

jurotek

Will that help with ie8 or with the selectable area?

a

[arnolfo]

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.

[Paulie_D]

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

[arnolfo]

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

[arnolfo]

Paulie,

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

a

[Author]

Posts