CSS menu dont work in IE - css

what have I done wrong that in IE the menu doesnt work as in other browsers it does work.
In IE the menu buttons are vertical instead of horizontal.
Link to a test subdomain : http://test.beterlopenwinkel.nl/leiderdorp.php
And I cant get rid of that list style in IE neither.
CSS:
#navigation{
width:200px;
background-image: -moz-linear-gradient(left, orange, #f3980b); /* FF3.6 */
background-color:orange;
border-radius:8px;
font-size:16px;
font-weight:bold;
text-align:center;
width:1000px;
height:30px;
}
#navigation ul{
margin:0px;
padding:0px;
}
#navigation ul li{
display:inline;
list-style-type:none ;
padding:5px 10px 5px 10px; //dropmenupadding
margin-left:15px;
position:relative;
}
#navigation li a{
color:#fff;
text-decoration:none;
padding:5px 10px 5px 10px;
display:inline;
}
#navigation li a:hover{
text-decoration:none;
//background-color:orange;
//border-radius:15px;
//border:solid 2px #333;
color:#333;
}
#navigation li ul{ //dropmenu
margin:0px;
padding:0px;
display:none;
position:absolute;
left:0px;
top:35px;
background-color:orange;
border-radius:15px;
box-shadow:0px 0px 5px #000;
}
#navigation li:hover ul{
display:block;
width:160px;
}
#navigation li li{
list-style:none;
display:list-item;
}
#navigation li li a{
color:#fff;
text-decoration:none;
padding:10px;
}
#navigation li li a:hover{
text-decoration:none;
}

For starters, you might want to make sure your HTML is valid. Check the W3 Validator here:
http://validator.w3.org/check?uri=http%3A%2F%2Ftest.beterlopenwinkel.nl%2Fleiderdorp.php&charset=%28detect+automatically%29&doctype=Inline&group=0
Invalid markup is the #1 reason why CSS behaves in unexpected manners in different browsers (not just IE)

First, you need to fix the HTML:
<ul>
<li>Solidus</li>
<li>Finn Comfort</li>
<li>Think!</li>
<li>Footnotes</li>
<li>MBT</li>
<li>Vabeene</li>
<li>Meindl</li>
<li>Stadler</li>
<li>Fit Flop</li>
<li>Durea</li>
<li>Van Lier</li>
<li>Schneider</li>
</li> **THE LI SHOULD BE CLOSED AFTER THE UL, LIKE YOU DID FOR OTHER SUBMENUs**
</ul>

Related

Parent Navigation different color while in submenu

Here is the jsFiddle : http://jsfiddle.net/wQs5a/
What I am trying to do is make is so when you highlight over the parent item,
It is the color gray (#aaaaaa). Then when you go into the submenu I want the submenu
item to be highlighted the same gray (which currently works fine).
But now I want the parent item to return to green (#60a74a) while being
over the submenu item.
Any help would be great. From my research it seems I might need some Javascript
Thanks for any help.
The CSS:
.leftNav {
height:58px;
background: #1c1c1c;
position:relative;
font-family:'TradeGothic LT CondEighteen';
font-size:18px;
width:88px;
z-index:500;
}
.leftNav .table {
/*display:table;*/
margin:0 auto;
}
.leftNav .select,
.leftNav .current {
margin:0;
padding:0;
list-style:none;
display:table-cell;
white-space:nowrap;
}
.leftNav li {
margin:0;
padding:0;
height:auto;
float:left;
}
.leftNav .select a {
display:block;
height:58px;
float:left;
background: #1c1c1c;
padding:0 20px 0 20px;
text-decoration:none;
line-height:58px;
white-space:nowrap;
color:white;
}
.leftNav .select a:hover,
.leftNav .select li:hover a {
background: #aaaaaa;
padding:0 0 0 0px;
cursor:pointer;
color:white;
}
.leftNav .select a:hover strong,
.leftNav .select li:hover a strong {
display:block;
float:left;
padding:0 20px 0 20px;
background:#aaaaaa;
cursor:pointer;
}
.leftNav .select_sub {
display:none;
}
/* IE6 only */
.leftNav table {
border-collapse:collapse;
margin:-1px;
font-size:1em;
width:0;
height:0;
}
.leftNav .sub {
margin:0 auto;
padding:0;
list-style:none;
font-weight:bold;
}
.leftNav .sub_active .current_sub a,
.leftNav .sub_active a:hover {
background:transparent;
color:white;
}
.leftNav .select :hover .select_sub,
.leftNav .current .show {
display:block;
position:absolute;
top:58px;
background:#60a74a;
padding:0;
z-index:100;
left:-100px;/*this is the alignment for the submenu*/
float:left;
}
.leftNav .current .show {
z-index:10;
}
.leftNav .select :hover .sub li a,
.leftNav .current .show .sub li a {
display:block;
float:left;
background:transparent;
padding:0 20px 0 20px;
margin:0;
white-space:nowrap;
border:0;
color:white;
}
.leftNav .current .sub li.sub_show a {
color:white;
cursor:default;
background:#60a74a;
}
.leftNav .select :hover .sub li a:hover,
.leftNav .current .sub li a:hover {
visibility:visible;
color:white;
background:#aaaaaa;
}
.leftNav .select :hover .select_sub,
.leftNav .current .show {
display:block;
position:absolute;
top:58px;
background:#60a74a;
padding:0;
z-index:100;
left:0;/*this is the alignment for the submenu*/
float:left;
}
Welcome to SO! You can add an extra div to the .sub element (select_bg) and position it with margin-top, z-index etc.:
http://jsfiddle.net/wQs5a/1/
Maybe not the best solution because you have to work with exact dimensions but you don't need to use JS. :)

CSS white space between menu

i have a problem with CSS white space between words of the menu bar. I tried numerous ways but still cant solve it. Can someone help me here?
The picture of the menu problem can be seen below:
http://imageshack.us/photo/my-images/201/44262065.jpg/
I want the outcome to be like this, lesser space between each menu:
http://i47.tinypic.com/2vvwcnn.jpg
Here is my css:
#cssmenu{
border:none;
border:0px;
margin:0px;
padding:0px;
font-family:verdana,geneva,arial,helvetica,sans-serif;
font-size:14px;
font-weight:bold;
color:8e8e8e;
}
#cssmenu ul{
background:url(img/menu-bg.gif) top left repeat-x;
height:43px;
list-style:none;
margin:0;
padding:0;
}
#cssmenu li{
float:left;
padding:0px 0px 0px 132px;
display: inline-block;
}
#cssmenu li a{
color:#666666;
display:block;
font-weight:bold;
line-height:43px;
padding:0px 0px;
text-align:left;
text-decoration:none;
}
#cssmenu li a:hover{
color:#000000;
text-decoration:none;
}
#cssmenu li ul{
background:#e0e0e0;
border-left:2px solid #f68618;
border-right:2px solid #f68618;
border-bottom:2px solid #f68618;
display:none;
height:auto;
filter:alpha(opacity=95);
opacity:0.95;
position:absolute;
width:180px;
z-index:200;
/*top:1em;
/*left:0;*/
}
#cssmenu li:hover ul{
display:block;
}
#cssmenu li li {
display:block;
float:none;
padding:0px;
width:180px;
}
#cssmenu li ul a{
display:block;
font-size:12px;
font-style:normal;
padding:0px 10px 0px 15px;
text-align:left;
}
#cssmenu li ul a:hover{
background:#949494;
color:#000000;
opacity:1.0;
filter:alpha(opacity=100);
}
#cssmenu p{
clear:left;
}
#cssmenu .active > a:hover {
color:#ffffff;
}
Here is my html code:
<div id='cssmenu'>
<ul>
<li><a href='index.php'><span>Home</span></a></li>
<li><a href='promotions.php'><span>Promotions</span></a></li>
<li><a href='outlets.php'><span>Outlets</span></a></li>
<li><a href='feedback.php'><span>Feedback</span></a></li>
<li class='has-sub '><a href='#'><span>Career</span></a>
<ul>
<li><a href='stall.php'><span>Stall Leasing</span></a></li>
<li><a href='career.php'><span>Career Opportunity</span></a></li>
</ul>
</li>
<li><a href='contactUs.php'><span>Contact Us</span></a></li>
</ul>
</div>
use this decrease your padding of li and line-height also
#cssmenu li{
float:left;
padding:30px;
display: inline-block;
}
Try removing the padding from .border class, row 311 in you blue round.css file

Dropdown menu broken on IE9

I am building a website from a bought theme, and in FF and in Chrome it looks perfect.But,on IE9 in compatibility mode, i am having a big problem.
One menu item has dropdown, and on IE, that dropdown menu is moved bellow the next menu item, and it is very hard to click o it.I tried "playing" around with CSS navigation and menu setting, but no luck...
Can anyone help:
/* Mainmenu Styling */
#mainmenu{
width:680px;
margin:1px 0px 0px 0px;
float:left;
}
.navigation{
width:630px;
margin-top:38px;
padding-left:160px;
float:left;
list-style-type:none;
}
.navigation ul{
margin:0px;
padding:0px;
list-style-type:none;
position:left;
clear:both;
}
.navigation li{
list-style-type:none;
padding:0px;
margin:0px;
float:left;
z-index:100;
position:relative;
}
.navigation li a{
font-size:16px;
text-decoration:none;
color:#a7a6a6;
display:block;
padding:10px 30px 16px 8px;
float:left;
z-index:100;
margin-right:0px;
}
.navigation li.current a, .navigation li a:hover, .navigation li.current li a:hover{
text-decoration:none;
color: #d23a3b;
}
.navigation li.current li a{
text-decoration:none;
color:#a7a6a6;
}
.navigation li li{
margin:0 0 0px 0px;
padding:0px;
position:relative;
z-index:100;
}
.navigation ul{
display:none;
position:absolute;
top:45px;
width:159px;
padding-bottom:5px;
z-index:100;
background-color:#fafafa;
border-top:none;
border-bottom:1px solid #d3d3d3;
border-left:1px solid #d3d3d3;
border-right:1px solid #d3d3d3;
}
.navigation li ul a{
width:109px;
height:auto;
float:left;
padding:0px 15px 8px 15px;
font-size:14px;
color:#a7a6a6;
line-height:24px;
z-index:100;
text-decoration:none;
}
Link is : http://goo.gl/LHDtg
try the below css for desired IE version
.navigation ul {
background-color: #FAFAFA;
border-color: -moz-use-text-color #D3D3D3 #D3D3D3;
border-style: none solid solid;
border-width: medium 1px 1px;
display: none;
padding-bottom: 5px;
position: absolute;
top: 85px; /* in your website it is 45px but for IE i just tried 85px which work fine*/
width: 159px;
z-index: 100;
}
see image for demo: I tried it in IE8

z-index not working on CSS dropdown menu

I have a CSS driven simple drop down menu that can appear in double rows on narrower screens.
When I activate the dropdown of one of the top row items the drop down appears at the same "Z" level as the bottom row.
I thought I've set the z-indexes as required but it isn't working in Chrome, Firefox, Safari or iPhone.
Here is a sample: http://jsfiddle.net/bNBp3/ - "Meat" has a dropdown attached.
<ul id="main-navigation">
<li><span>Home</span>
</li>
<li><span>Meat</span>
<ul>
<li><span>Bacon</span></li>
<li><span>Ham</span></li>
<li><span>Pork</span></li>
</ul>
</li>
<li><span>Vegetables</span>
</li>
<li><span>About Us</span>
</li>
<li><span>Contact Us</span>
</li>
<li><span>A-Z</span>
</li>
</ul>
ul#main-navigation {
display:block;
border-bottom:1px solid #ccc;
margin:0 auto 0px auto;
min-height:21px;
padding:0;
width:100%;
z-index:11;
clear:both;
}
ul#main-navigation li {
display:block;
float:left;
list-style:none;
margin:0 5px 0 0;
padding:0;
position:relative;
z-index:12;
min-height:22px;
min-width:30%;
}
ul#main-navigation li a {
color:#000;
display:block;
padding:2px;
text-decoration:none;
z-index:13;
}
ul#main-navigation li a.current, ul#main-navigation li a.section {
color:#fff;
}
ul#main-navigation li ul {
background:#eee;
position:absolute;
left:-1px;
top:21px;
display:none;
overflow:hidden;
padding:0px;
z-index:14;
width:100%;
border:1px solid #ccc;
}
ul#main-navigation li ul li {
display:block;
float:none;
margin:0;
z-index:15;
width:100%;
border-bottom:1px solid #ccc;
}
ul#main-navigation li ul li a {
background:#eee;
display:block;
color:#333;
z-index:16;
zoom:100%;
}
ul#main-navigation li ul li a:hover {
background:#fff;
}
ul#main-navigation li:hover {
background:#eee;
border-left:1px solid #ccc;
border-right:1px solid #ccc;
}
ul#main-navigation li:hover a.current {
background:#eee; color:#000;
}
ul#main-navigation li:hover ul {
display:block;
}
Just get rid of all the z-index values and it works fine:
http://jsfiddle.net/bNBp3/12/
Tested in Chrome and Firefox6.
Edit: It seems I forgot to remove the z-index from ul#main-navigation li ul in the demo and that's what makes it work, so just set it to any value 1 or higher.

How to centre my CSS menu?

First posted working code gets awarded the answer...
Here's a simple web-page with a CSS drop-down menu
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Center menu test</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<link type="text/css" rel="stylesheet" href="css_menu.css">
</head>
<body>
<div class="menu">
<ul><li>Home</li></ul>
<ul>
<li>Menu with items
<ul>
<li>one</li>
<li>two</li>
</ul>
</li>
</ul>
</div>
<div style="clear:both;"></div>
</body>
</html>
and here is the corresponding CSS :
.menu {margin-left:auto; margin-right: auto; padding:0; margin:8px; color: #000000; width:100%; border:1px; clear:both;}
/*Color navigation bar normal mode*/
.menu a,
.menu a:visited {font-family:Arial, Helvetica, sans-serif;font-style:normal;font-weight:bold;font-size:12px;color: #000000;background-color: #FFFFFF;text-decoration: none;}
.menu ul {list-style-type:none;padding:0; margin:0;}
.menu ul li {float:left; position:relative; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; margin-right: 4px; border:solid 1px #004080; }
.menu ul li a {color: #000000;background: #FFFFFF;float:none !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:30px; line-height:30px; padding:0 10px 0 10px; text-decoration:none; }
.menu ul li ul {display:none; border:none;color: #000000; background: #FFFFFF;}
.menu ul li:hover a {background-color:#d7f1ff; text-decoration:none; color:#000000;}
.menu ul li:hover ul {display:block; position:absolute; z-index:999; top:29px; margin-top:1px; left:0;}
.menu ul li:hover ul li a {display:block; width:12em; height:auto; line-height:1.3em; margin-left:-1px; padding:5px 10px 5px 10px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#FFFFFF; color:#000000;}
.menu ul li:hover ul li a:hover {background-color:#d7f1ff; text-decoration:none;color:#000000;}
.menu table {position:absolute; top:0; left:0; border-collapse:collapse;color: #000000;background: #FFFFFF;}
.menu ul li a:hover {background-color:#d7f1ff; text-decoration:none;color:#000000;}
.menu ul li a:hover ul {display:block; width:12em; position:absolute; z-index:999; top:29px; left:0; }
.menu ul li a:hover ul li a {display:block; width:12em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#FFFFFF; color:#000000;}
.menu ul li a:hover ul li a:hover {background-color:#d7f1ff; text-decoration:none;color:#000000;}
Why isn't the menu centered on the page?
Its width is 100%, so it is centered, but not centred visibly (how can you center something that takes up 100% of the width?).
It may be easier to understand by looking at this fiddle.
Thirtydot also points out that margin: 8px is clobbering your previous setting of margin-left and margin-right.
Update
Here it is, working.
I would recommend changing your markup - having each in a separate ul is confusing.
Set margin:auto to center an element.
IE is a bit picky with centering elements, so do some tests. If it doesn't work in IE, set text-align:center to center the element's contents. Beware though, text-align is inherited as it cascades.
Try this.
body{
text-align:center;
}
.menu{
margin: 0 auto;
text-align:left;
width:750px; /*change width as needed*/
}
use display:inline for li & margin:auto and text-align:center for Ul
.header {
background: none repeat scroll 0 0 #231F20;
clear: both;
height: 20px;
}
.header ul {
clear: both;
height: 20px;
margin: auto;
text-align: center;
}
.header ul li {
display: inline;
list-style-type: none;
padding: 0 20px;
}
Here header is the div containing the menu ul & li

Resources