WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > Browser Compatibility > CSS Internet Explorer Menu Display Problem

Reply
  Thread Tools Display Modes
Old 22nd February 12, 06:29 PM   #1
DougWest
WLC Member
 
Join Date: Feb 2012
Posts: 2
Default CSS Internet Explorer Menu Display Problem

I should probably be able to figure this one out, but I have been at it for days and cannot seem to make progress. At first I thought the problem was with li:hover and Internet Explorer. I am relatively new to css and to WordPress and am in the process of developing a site using a theme named Amphawa. I have found the theme difficult to use and, because I am not that proficient in css, the situation is even worse.

Here is the problem. The Navigation Bar I am developing using the tools within the theme seem to work in Firefox and Safari on both the PC and Mac. However, the second level "fly-out" menus are not working on Internet Explorer on the PC. To view the problem, you can go to the site at http://csl.chemicalsolutionsltd.com. Try and view the page in both Firefox and Internet Explorer and pay special attention when you hover over About Us and then Who We Are in the Nav Bar. In Firefox when hovering over Who We Are, you get a fly-out to the right reading Vision, Mission, Value and Staff. It does not appear in IE.

I thought I had narrowed the problem down to li:hover (although it well might be something else) and have found references to problems with this being unsupported in IE. All the fixes I have tried do not seem to work.

Below is the css relating to the drop down menu:

body {
behavior:url("csshover3.htc");
}
#menu_wrapper {
width: 980px;
height: 66px;
padding-top: 20px;
}
#menu_wrapper ul {
list-style: none;
display: block;
padding: 18px 5px 0 0;
margin: -43px 15px 0 0;
float: right;
font-size: 16px;
text-transform: uppercase;
}
#menu_wrapper ul li {
display: block;
float: left;
margin: 0 0 0 0;
}
#menu_wrapper ul li a {
display: block;
height: 25px;
padding: 23px 10px 8px;
margin: 0;
color: #000000;
}
#menu_wrapper ul li a:hover {
background: transparent url('../images/menu_hover.png') repeat-x bottom center;
}
#menu_wrapper ul li ul {
display: none;
list-style: none;
background: #fff;
border: 1px solid #ebebeb;
position:absolute;
float: none;
padding: 0;
width: 180px;
z-index: 1000;
margin-top: -23px;
padding-top: 5px;
padding-bottom: 5px;
font-size: 15px;
-webkit-border-bottom-right-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-bottomright: 5px;
-moz-border-radius-bottomleft: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
#menu_wrapper ul li:hover ul {
display: block;
}
#menu_wrapper ul li ul li{
clear: both;
width: 180px;
padding: 0;
margin: 3px 0 3px 0;
height: 30px;
}
#menu_wrapper ul li ul li:first-child {
border-top: 0;
}
#menu_wrapper ul li ul li:hover {
background: none repeat scroll 0 0 #EBEBEB;
height: 30px;/*DHW ADDED*/
}
#menu_wrapper div .nav li ul li a, #menu_wrapper div .nav li.current-menu-item ul li a, #menu_wrapper div .nav li ul li.current-menu-item a,#menu_wrapper .nav ul li ul li a, #menu_wrapper .nav ul li.current-menu-item ul li a, #menu_wrapper .nav ul li ul li.current-menu-item a {
color: #96A1A6;
display: block;
width: 100%;
border: 0;
margin-top: -10px;
background: transparent;
height: auto;
font-weight: normal;
padding: 13px 20px 8px 20px;
}
#menu_wrapper ul li ul li ul {
margin-left: 180px;
margin-top: -55px;
}
#menu_wrapper ul li ul li:hover ul {
display: block;
}
#menu_wrapper ul li ul li a {
width: 171px;
display: block;
}
#menu_wrapper ul li ul li:hover a{
color: #777;
background: transparent;
}

Thanks in advance for any insights you might have. And please do keep in mind that I am not a css wizard, so try and keep it as simple as possible. I am truly at my wits end. Thanks.
DougWest is offline   Reply With Quote
Old 23rd February 12, 10:16 AM   #2
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,196
Default Re: CSS Internet Explorer Menu Display Problem

And the version of "IE on the PC" is???
chrishirst is offline   Reply With Quote
Old 23rd February 12, 02:52 PM   #3
DougWest
WLC Member
 
Join Date: Feb 2012
Posts: 2
Default Re: CSS Internet Explorer Menu Display Problem

I have had the same results with IE 7 and 8. The "drop down" portion of the nav bar works (2nd level), but the "fly-out" portion (3rd level) does not. As I said, it works fine with Firefox and Safari, both on the Mac and the PC.
DougWest is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 03:46 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.