CODEWITHSUNDEEP
cssinternet-explorermenu
Jaz Parkyn
Jaz Parkyn

Reputation: 186

CSS menu not rendering correctly in IE

The menu that I built works correctly in all other browsers except IE - what a surprise.

jsfiddle of menu: http://jsfiddle.net/JazParkyn/6jshy/19/

not sure that the fiddle will help though as the menu works correctly on here when viewed in ie, so i'm guessing that it's something to do with my template. I've used the IE edge code and that has made everything else on the site work, does anyone have any ideas?

css:

 nav ul ul {
 z-index:100;
opacity: 0;
visibility: hidden;
transition: all .5s ease-in;
-o-transition: all .5s ease-in;
-ms-transition: all .5s ease-in;
-moz-transition: all .5s ease-in;
-webkit-transition: all .5s ease-in;
}
nav ul li:hover > ul {
 z-index:100;
visibility: visible;
opacity: 1;
}
nav ul {
background: #355E95;
box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content:"";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #1881B4;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block;
padding: 20px;
color: #ffffff;
text-decoration: none;
}
nav ul ul {
background: #355E95;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #D5EEFF;
border-bottom: 1px solid #D5EEFF;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #1881B4;
}
nav ul ul ul {
position: absolute;
left: 100%;
top:0;
}

Any suggestions would be appreciated

This is happening in IE10 and i've forced standards mode with the ie edge meta tag. the jsfiddle will work fine in ie, just not the actual web page.

EDIT: i've just put the following css in and it now magically works

html {
  -webkit-font-smoothing: antialiased;
}

However, I still have the issue of the font not rendering properly in safari and opera, i'm guessing something to do with their rendering machines - the font appears to be heavier in weight, has anyone had this happen before?

Upvotes: 0

Views: 265

Answers (1)

Seer
Seer

Reputation: 739

hmm, the fiddle is working in IE. on your page I would add in the

menu.css (line 51) 

#nav ul li { 
  /* leave the other properties here */ 
  position:relative;
}

and for the submenu (line 56) 

#nav ul ul {
   /* leave the other properties here */ 
   left:0;
}

Maybe you can add a property to the separator class (just for visual feedback) : 

.separator {
   cursor: pointer;
}

Upvotes: 2

Related Questions