westman 10 Report post Posted April 1, 2018 I am not a fan of Internet Explorer but trying to get my html and css working well with it. #nav { font-family:"Arial Black", Gadget, sans-serif; text-align:left; display:inline-block; width:0px auto; /*width:100%; text-align:right;*/ margin:0px auto; padding:0; background:#5C5B5E; /* background color */ border-radius:10px; /*some css3*/ -moz-border-radius:10px; -webkit-border-radius:10px; /*box-shadow:0 2px 2px rgba(0,0,0, .5); -moz-box-shadow:0 2px 2px rgba(0,0,0, .5); -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5);*/ } #nav li { margin:10px; float:left; position:relative; list-style:none; } #nav ul li:first-child > a { -moz-border-radius-topleft:10px; /*some css3*/ -moz-border-radius-topright:10px; -webkit-border-top-left-radius:10px; -webkit-border-top-right-radius:10px; } #nav ul li:last-child > a { -moz-border-radius-bottomleft:10px; /*some css3*/ -moz-border-radius-bottomright:10px; -webkit-border-bottom-left-radius:10px; -webkit-border-bottom-right-radius:10px; } #nav ul { opacity:0; visibility:hidden; padding:0; width:175px; position:absolute; background:#5C5B5E; /*sub background color*/ border:1px solid #5C5B5E; /*sub border color*/ border-radius:10px; /*some css3*/ -moz-border-radius:10px; -webkit-border-radius:10px; box-shadow:0 2px 2px rgba(0,0,0, .5); -moz-box-shadow:0 2px 2px rgba(0,0,0, .5); -webkit-box-shadow:0 2px 2px rgba(0,0,0, .5); -moz-transition:opacity .25s linear, visibility .1s linear .1s; -webkit-transition:opacity .25s linear, visibility .1s linear .1s; -o-transition:opacity .25s linear, visibility .1s linear .1s; transition:opacity .25s linear, visibility .1s linear .1s; } #nav ul li { float:none; margin:0; } <div style="position:relative; z-index:2;"> <ul id="nav"> <li><a href="?p=home#home">Home</a></li><br /> <li><a href="?p=home#services">Services</a></li><br /> <li><a href="?p=home#about">About us</a></li><br /> <li><a href = "javascript:void(0)" onclick = "document.getElementById('signin').style.display='block';document.getElementById('fade').style.display='block'">Login</a></li> </ul> </div> How do I get this to be IE friendly? Quote Share this post Link to post Share on other sites
Ingolme 939 Report post Posted April 1, 2018 Which part of it is not working in Internet Explorer and which version of Internet Explorer are you testing? Quote Share this post Link to post Share on other sites
westman 10 Report post Posted April 1, 2018 I am using IE 11. Here is the output in chrome and ie 11 Quote Share this post Link to post Share on other sites
dsonesuk 846 Report post Posted April 1, 2018 IS this supposed to be a horizontal or vertical menu? First : The br elements are not valid and not allowed as child of ul, remove them IF you want this as a vertical menu, remove float: left;, from LI elements and change to display: block; IF you want horizontal removing the BR element will fix this, as the float: left; property will give you the horizontal li that you require. 1 Quote Share this post Link to post Share on other sites
westman 10 Report post Posted April 1, 2018 Thank you again Dsonsuk. It works well. I removed the junk and it is all vertical. Quote Share this post Link to post Share on other sites