Im developing a website for a customer in Wordpress. The website www.daanen-shipping.nl has a dropdown menu which is working fine in FF/ Chrome and Safari but not in IE. The customer is useing IE 9. Apparently this is a common problem for many people. Compatibility view doesn't seem to be the problem.
Im kinda new in CSS and Javascript so i have no idea where to begin. I did hours of research with nu results. Hopefully there is someone that can help me.
Menu CSS:
#menu {
position: absolute;
right: 100px;
top: 180px;
}
#menu ul li {
float: left;
text-transform: uppercase;
font-size: 13px;
margin: 0 0 0 20px;
position: relative;
display: inline-block;
padding: 0 0 10px 0;
}
#menu ul li a {
color: #fff;
padding: 4px 1px;
display: inline-block;
}
#menu ul li:hover a, #menu ul li.current-menu-item a, #menu ul li.current-menu-parent a {
text-decoration: none;
border-bottom: #fff 3px solid;
padding: 4px 1px;
display: inline-block;
}
#menu ul li:hover a {
margin-bottom: 5px;
}
#menu ul li.current-menu-item ul.sub-menu li a {
color: #7b7b7b;
}
#menu ul li ul.sub-menu li, #menu ul li ul.sub-menu li a {
margin: 0;
padding: 0;
}
#menu ul li ul.sub-menu {
display: none;
}
#menu ul li:hover ul.sub-menu {
position: absolute;
top: 30px;
left: 0px;
background: #EBEBEB;
border: #ddd 1px solid;
width: 200px;
padding: 5px 0 2px 0;
overflow: hidden;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#menu ul li ul.sub-menu li {
width: 100%;
}
#menu ul li ul.sub-menu li a {
padding: 8px 15px;
text-decoration: none;
border: 0px;
color: #7b7b7b;
}
If there is something else i need to post to be more clear, please let me know and ill work on it.
Thanks in advance!
William.
hit f12 and make sure that the site is using IE 9 standards. If it's not switch to IE9 standards and see if that fixes it. If it does, you can add some code to your header that tells the browser 'if the user is using IE 8 use IE8 standards or, if the user is using IE 9, use IE 9 standards'. IE is 3 browsers in one (7,8, and 9) and it has a bad habit of switching to IE7 and quirks mode on some sites. Let me know if it works when you change to IE9 standards and, if it does, I'll see if I can dig up the code to add to force the standards.
Related
I'm having some issues with my menu being displayed properly. My 3rd level menu items are hidden behind the others for some reason. I've gone over my template I'm using and things seem to be alright on that end, otherwise the menu option wouldn't even be displayed. Thus I'm thinking something is wrong with my CSS, though I can't see what that would be. Does anyone have any ideas as to what's going on here? You can see an example at http://www.bpwsaskatoon.com and then hovering on the "Membership" option at the top.
The problem is in the css. First you should use classes or id:s on your navigation styles. Example ul li is now targeting every ul li. By using #nav ul li will target only all ul li inside #nav. In html the ul in .main_nav_menu should be div. You have now ul directly under ul.
I would recommend that you try some jquery plugin for dropdown menus. Example Superfish is pretty good, it takes care of many thigs that you should consider in dropdown menus, example touch events.
Here is a quick css that should display the 3rd level menu items.
/*Navigation styles*/
#nav{
display:table;
margin:0 auto 0 auto;
position:relative;
padding:5px;
}
#mnwrpr{
height:48px;
box-shadow: 0 1px 2px rgba(0,0,0,0.5);
clear: both;
display: block;
position: relative;
width: 100%;
z-index:1;
}
#nav ul {
font-family:'Lato', sans-serif;
font-size: 15px;
margin: 0;
padding: 0;
}
#nav ul li {
display: block;
position: relative;
float: left;
}
#nav li ul {
display: none;
}
#nav ul li a {
display: block;
text-decoration: none;
color: #8b8b8b;
padding: 5px 15px 5px 15px;
margin-left: 1px;
white-space: nowrap;
}
#nav li:hover ul {
display: block;
position: absolute;
}
#nav li:hover li {
float: none;
font-size: 14px;
}
#nav li:hover li { background: #ececec; }
#nav li:hover li a:hover {
background: #bcbcbc;
}
#nav ul li ul li ul {
top: 0;
left: 100%;
z-index: 99;
min-width: 12em;
position: absolute;
margin: 0;
padding: 0;
list-style: none;
display: none!important;
}
#nav ul li ul li:hover ul {
display: block!important;
}
#nav ul li ul li ul li {
position: relative;
margin: 0;
padding: 0;
list-style: none;
}
I'm using a CSS navbar that has drop down menus. I had a problem with scaling on my site, but some helpful users here helped me fix it. The solution they gave me was to change the position attribute to absolute.
This works fine for text boxes and images, but changing the navbar code to absolute breaks it and makes some of the buttons go to a second line.
Is there a way to stop this from happening and also stop the navbar from bugging out when the page is resized? Sorry if this is hard to understand. This is my navbar CSS, the HTML is just a list:
Jsfiddle: http://jsfiddle.net/qN8sm/embedded/result/
ul {
font-family: 'Open Sans', Times;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
position: relative;
z-index: 150;
}
ul li {
display: block;
position: relative;
float: right;
}
li ul { display: none; }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 7px solid #CC4D4D;
padding: 25px 30px 30px 30px;
background: #333333;
margin-left: 0px;
white-space: nowrap;
}
ul li a:hover { background: #757575; }
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #757575; }
li:hover li a:hover { background: #757575; }
What you could try is set min-width:(amount of pixels)px. This sets the minimum width for an element, but if unless you set a max-width, it can upscale.
I'm totally new to css, but I ventured to create a website using a wordpress theme. The theme is supposed to be IE compatible but my hover submenus aren't clickable when in IE7,8 or 9.
That said, I've created style-IE*.css files and pointed to them. I've increased the index #. But it's still not working.
Here is the site: www.mariasherranz.com
and here is the menu script (canned from the theme, with some color and font changes):
.navigation {
text-transform: uppercase;
position: fixed;
z-index: 10;
display: none;
}
.navigation ul.menu li a {
font: 26px 'Marvel', sans-serif;
color: #FFFFFF;
line-height: 35px;
text-decoration: none;
padding: 0px 10px 0px 10px;
margin-bottom: 5px;
background: none;
float: left;
clear: both;
}
.navigation ul.menu li ul {
float: left;
display: none;
}
.navigation ul.menu li ul li {
margin: 0px 0px 0px 1px;
float: left;
}
.navigation ul.menu li ul li a {
font-size: 24px;
color: #FFFFFF;
background:none;
}
.navigation ul.menu li ul li a:hover {
color: #000000;
background:#FFFFFF;
}
.navigation ul.menu li ul li ul {
margin: 36px 0px 0px 0px;
position: absolute;
z-index: 20;
display: none;
}
.navigation ul.menu li ul li ul li {
margin: 0px;
white-space: nowrap;
float: right;
}
.navigation ul.menu li ul li ul li a {
margin: 0px 0px 1px 0px;
}
.navigation ul.menu li ul li ul li ul {
display: none !important;
}
Thank you in advance for any help!
My website does something very very similar with IE. It's a vertical sub-menu instead of a horizontal, but when in IE if you hover over the top menu, the sub-menu appears, but you have to move the mouse at lightning speed to highlight a link or the menu disappears. One thing you should look strongly at (I looked at your site) is this:
padding-left in your .css files for (.navigation ul.menu li a )
Worth noting, it appears to me that your theme also has a style-IE9.css file, which probably overrides some of the style.css attributes.
When I worked with the Dev Tools on IE9 (first time ever) I could see that the issue partially resolved when I changed the padding-left to 0px in the IE9.css file under (.navigation ul.menu li a). A say partially, because the sub-menu titles for About ( Bio and Resume) were "squished" really close to the top menu.
I'm having some trouble with changing a CSS drop down menu to a drop up menu. I think I'm almost there, but for some reason some of the buttons are not displayed correctly (the text is moving downwards, but the menu is moving upwards). See crisislab.nl for the code in action.
Any help would be much appreciated!
#navigation {
width: 980px;
height: 38px;
}
#navigation li {
float: left;
position: relative;
top: 220px;
}
#navigation li:hover {
background: transparent url(gfx/navigation_hover.png) repeat;
}
#navigation li a {
text-transform: uppercase;
color: white;
padding: 13px 33px;
line-height: 38px;
font-size: 11px;
}
#navigation li a:hover {
text-decoration: none;
}
#navigation li ul {
position: absolute;
background: transparent url(gfx/navigation_hover.png) left top repeat;
z-index: 1000;
min-width: 100%;
display:none;
left:-1px;
}
#navigation li:hover ul {
bottom: 38px;
display:block;
}
#navigation li ul li {
background: none;
width: 100%;
}
#navigation li ul li:hover {
background: none;
background-color: #2a51b5;
}
#navigation li ul li a {
text-transform: uppercase;
color: white;
padding-left: 8px 10px;
line-height: 28px;
width: 100%;
display:block;
}
When having a hard time finding bugs, always replicate and break the code into smallest simplest chunks.
Hope this would help: http://jsfiddle.net/ccS7q/
But you wouldn't be able to achieve drop up menu with the sublists listing upwards unless you use jquery or javascript with it. The fiddle above can't do listing upwards, you could though adjust manually the ul li.menu-item ul top value as the listing lengthens. Though its a lot of work. I would advise you to use jquery instead.
Remove that bottom: 38px; from below code:
#navigation li:hover ul {
bottom: 38px;/*Just Remove This*/
display: block;
}
Add top:0 to #navigation ul li ul li
#navigation li ul li {
background: none repeat scroll 0 0 transparent;
top: 0;/*Add This*/
width: 100%;
}
I think this will help you.
On the site I'm currently working on there is a nested unordered list in the sidebar, when an <li> from this list is hovered over, it shows the (previously hidden) child <ul>. This is working fine in all browsers except IE 7+6. In these browsers the popup <ul> displays beneath the <li>'s of the list above. Any idea why it would be doing this?
My CSS is as follows:
div#sidebar-products {
border-bottom: 3px solid #D31245;
height: 297px;
}
div#sidebar-products h2 {
font-size: 1.5em;
border-bottom: 0;
padding: 5px 0 12px 0;
color: #D31245;
}
div#sidebar-products ul{
z-index: 0;
}
div#sidebar-products li{
position: relative;
}
div#sidebar-products ul li a,
div#sidebar-products ul li a:visited
{
display: block;
border-bottom: 1px solid #eeeeee;
text-decoration: none;
padding: 7px 10px 7px 20px;
color: #6b6869;
background: #fff url(/img/raquo-red.png) 7px center no-repeat;
}
div#sidebar-products li a:hover,
div#sidebar-products li a:focus,
div#content-holder div#sidebar-products li.active a
{
background-image: url(/img/raquo-white-red.png);
background-color: #D31245;
color: #fff;
}
div#sidebar-products ul ul{
display: none;
padding-left: 10px;
position: absolute;
margin-top: -1px;
z-index: 9999 !important;
border: 1px solid #D31245;
background: #f3f3f3;
width: 247px;
}
div#sidebar-products ul li ul li {
margin-bottom: 0;
position: static !important;
z-index: 500;
}
div#site-holder div#content-holder div#sidebar-products ul ul li a {
background: #fff url(/img/raquo-red.png) 10px center no-repeat;
padding-left: 24px;
color: #949494;
}
div#site-holder div#content-holder div#sidebar-products ul li ul li a:hover,
div#site-holder div#content-holder div#sidebar-products ul li ul li a:focus
{
color: #D31245;
background-color: #fff;
}
I reckon you have probably encountered the bug that IE doesn't treat z-indexes on a document level, but on a container level. I forget the exact bug details it is usually fixed by adding/removing position: relative to the shared ancestor element I believe.
Try these for some more details:
http://snook.ca/archives/html_and_css/position_relative_overflow_ie/
http://ltslashgt.com/2007/05/16/relative-zindex-and-ie/
I think you need to make sure you parent element is position relative, with overflow of auto
THere's a good article on smashing magazine.
It might help you: The Z-Index CSS Property: A Comprehensive Look