- This topic is empty.
-
AuthorPosts
-
September 20, 2013 at 11:17 am #150790
arnolfo
ParticipantI 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 1:00 pm #150796arnolfo
Participantjurotek
Will that help with ie8 or with the selectable area?
a
September 20, 2013 at 1:55 pm #150802arnolfo
ParticipantYes, 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 #150803Paulie_D
MemberI’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 4:06 pm #150806arnolfo
Participantjurotek,
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 #150807arnolfo
ParticipantPaulie,
You are right, as jurotek pointed out as well. Thank you for taking a look too!
a
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.