Click here to Skip to main content
11,708,721 members (71,172 online)
Rate this: bad
good
Please Sign up or sign in to vote.
See more: CSS
My CSS Menu bar has a little problem. The bar works fine in all the other major browsers including IE10, but not in IE 8 or 9. It seem like the float or the inline-block is being ignored. They are shown as stacked on top of one another instead of side by side. If you have IE 8 or 9 you can view the problem at kitchenova.com. I have made a jsfiddle of the menu bar: http://jsfiddle.net/bLZzL/

#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
  margin: 0;
  padding: 0;
  position: relative;
  font-family:Verdana, Geneva, sans-serif
}
#cssmenu {
    height: 30px;
    border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0px 0px;
    -webkit-border-radius: 5px 5px 0 0;
    background: #E0E0E0;
    background: -moz-linear-gradient(top, #FFFFFF 0%, #E0E0E0 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FFFFFF), color-stop(100%, #E0E0E0));
    background: -webkit-linear-gradient(top, #FFFFFF 0%, #E0E0E0 100%);
    background: -o-linear-gradient(top, #FFFFFF 0%, #E0E0E0 100%);
    background: -ms-linear-gradient(top, #FFFFFF 0%, #E0E0E0 100%);
    background: linear-gradient(to bottom, #FFFFFF 0%, #E0E0E0 100%);
    border-bottom: 2px solid #EB2226;
    z-index:999;
}
#cssmenu:after,
#cssmenu ul:after {
  display: inline-block;
  float:left;
 
}
#cssmenu a {
  background: #E0E0E0;
  background: -moz-linear-gradient(top, #FFFFFF 0%, #E0E0E0 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FFFFFF), color-stop(100%, #E0E0E0));
  background: -webkit-linear-gradient(top, #FFFFFF 0%, #E0E0E0 100%);
  background: -o-linear-gradient(top, #FFFFFF 0%, #E0E0E0 100%);
  background: -ms-linear-gradient(top, #FFFFFF 0%, #E0E0E0 100%);
  background: linear-gradient(to bottom, #FFFFFF 0%, #E0E0E0 100%);
  color: #000000;
  display: inline-block;
  font-family: Verdana, Geneva, sans-serif
  font-size: 15px;
  line-height: 29px;
  padding: 0 20px;
  text-decoration: none;
}
#cssmenu ul {
  list-style: none;
}
#cssmenu > ul {
  float: left;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu > ul > li:hover:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #EB2226;
  margin-left: -10px;
}
#cssmenu > ul > li:first-child > a {
  border-radius: 5px 0 0 0;
  -moz-border-radius: 5px 0 0 0;
  -webkit-border-radius: 5px 0 0 0;
}
#cssmenu > ul > li:last-child > a {
  border-radius: 0 5px 0 0;
  -moz-border-radius: 0 5px 0 0;
  -webkit-border-radius: 0 5px 0 0;
}
#cssmenu > ul > li.active > a {
 
}
#cssmenu > ul > li:hover > a {
  background: #070707;
  background: -moz-linear-gradient(top, #FFFFFF 0%, #BBBDBF 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FFFFFF), color-stop(100%, #BBBDBF));
  background: -webkit-linear-gradient(top, #FFFFFF 0%, #070707 100%);
  background: -o-linear-gradient(top, #FFFFFF 0%, #BBBDBF 100%);
  background: -ms-linear-gradient(top, #FFFFFF 0%, #BBBDBF 100%);
  background: linear-gradient(to bottom, #FFFFFF 0%, #BBBDBF 100%);
  box-shadow: inset 0 0 3px #000000;
  -moz-box-shadow: inset 0 0 3px #000000;
  -webkit-box-shadow: inset 0 0 3px #000000;
}
#cssmenu .has-sub {
  z-index: 1;
}
#cssmenu .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub ul {
  display: none;
  position: absolute;
  width: 200px;
  top: 100%;
  left: 0;
}
#cssmenu .has-sub ul li {
  *margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
  background: none repeat scroll 0 0 #E5E5E5;
  border-bottom: 1px dotted #000000;
  filter: none;
  font-size: 12px;
  display: block;
  line-height: 120%;
  padding: 10px;
}
#cssmenu .has-sub ul li:hover a {
  background: #EB2226;
  color:#FFF;
}
#cssmenu .has-sub .has-sub:hover > ul {
  display: block;
}
#cssmenu .has-sub .has-sub ul {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
  background: #0c7fb0;
  border-bottom: 1px dotted #6db2d0;
}
#cssmenu .has-sub .has-sub ul li a:hover {
  background: #095c80;
}



And this is the List it applies to:

Note the external style sheet is the code above.

<link href="assets/templates/v32029/css/Dropdown_style(8-6-2013).css" rel="stylesheet" type="text/css" />
 

<div id='cssmenu' style="removed:relative;">
<ul>
   <li class='active has-sub'><a href='http://www.kitchenova.com/Bakeware_c_8.html'><span>Bakeware</span></a>
      <ul>
         <li><a href='http://www.kitchenova.com/Measuring-Tools_c_407.html'><span>Measuring Tools</span></a></li>
         <li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSBakeware%3bBaking%20%26%20Pastry%20Tools'><span>Baking and Pastry Tools</span></a></li>
         <li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSBakeware%3bCookie%20%26%20Biscut%20Cutters'><span>Cookie and Biscuit Cutters</span></a></li>
         <li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSBakeware%3bDecorating%20Tools'><span>Decorating Tools</span></a></li>
         <li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSBakeware%3bPans%2c%20Molds%2c%20%26%20Sheets'><span>Pans, Molds, and Sheets</span></a></li>
         <li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSBakeware%3bBaking%20Dishes'><span>Baking Dishes</span></a></li>
         <li><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSBakeware%3bSilicone%20Bakeware'><span>Silicone Bakeware</span></a></li>
         <li class='last'><a href='http://www.kitchenova.com/search_results.html?&sn=162062355&e=ajx&srt=0&tag=CATSBakeware%3bMixing%20%26%20Prep%20Bowls'><span>Mixing and Prebowls</span></a></li>
      </ul>
Posted 12-Aug-13 8:02am

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

Hi,

I found solution for you main issue
"They are shown as stacked on top of one another instead of side by side."

On you HTML code you used one TABLE above "<link href="assets/templates/v32029/css/Dropdown_style(8-6-2013).css" rel="stylesheet" type="text/css" />", you just need to set it's width 100% like

I Checked your HTML and CSS both. You used CSS3 and this is will not work in IE7 and IE8. To use CSS3 properties in IE7 and IE8 you need PIE.htc[^] file.
  Permalink  

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 Maciej Los 235
1 Sergey Alexandrovich Kryukov 189
2 Mika Wendelius 180
3 OriginalGriff 143
4 Peter Leow 130
0 OriginalGriff 9,253
1 Sergey Alexandrovich Kryukov 8,562
2 CPallini 5,189
3 Maciej Los 4,966
4 Mika Wendelius 3,856


Advertise | Privacy | Mobile
Web02 | 2.8.150819.1 | Last Updated 12 Aug 2013
Copyright © CodeProject, 1999-2015
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100