html - Can't view horizontal menu in Mozilla Firefox and Internet Explorer -

in below code can't view horizontal menu in mozilla firefox , internet explorer.

this menu html

<div class="menu">     <ul id="menu">         <li><a href="../index.php">home</a></li>         <li><a href="../faqs.php">faqs</a></li>         <li><a href="../contact.php">contact us</a></li>     </ul> </div> 

this menu css

@font-face {     font-family: 'segoe print’;     src:url('fonts/segoe.eot?#’) format(‘eot’),             url(‘fonts/segoe.woff’) format(‘woff’),          url(‘fonts/segoe.ttf’) format(‘truetype’);   }  #menu, #menu ul {     margin: 0;     padding: 0;     list-style: none;     font-weight: bold  }  #menu {     width: 400px;     /*border: 1px solid #222;     background-color: #111;     background-image: linear-gradient(#444, #111);*/     border-radius: 6px;     background: rgb(107,91,90); /* old browsers */     background: #993333; /* old browsers */     background: #cc6666; /* old browsers */     background: #cc3333; /* old browsers */     background: #cc6666; /* old browsers */     background: #cc3333; /* old browsers */     /* ie9 svg, needs conditional override of 'filter' 'none' */     background: url(data:image/svg+xml;base64,pd94bwwgdmvyc2lvbj0ims4wiia/pgo8c3znihhtbg5zpsjodhrwoi8vd3d3lnczlm9yzy8ymdawl3n2zyigd2lkdgg9ijewmcuiighlawdodd0imtawjsigdmlld0jved0imcawidegmsigchjlc2vydmvbc3bly3rsyxrpbz0ibm9uzsi+ciagpgxpbmvhckdyywrpzw50iglkpsjncmfklxvjz2ctz2vuzxjhdgvkiibncmfkawvudfvuaxrzpsj1c2vyu3bhy2vpblvzzsigede9ijaliib5mt0imcuiihgypsiwjsigeti9ijewmcuipgogicagphn0b3agb2zmc2v0psiwjsigc3rvcc1jb2xvcj0ii2njmzmzmyigc3rvcc1vcgfjaxr5psixii8+ciagica8c3rvccbvzmzzzxq9ijqzjsigc3rvcc1jb2xvcj0ii2njmzmzmyigc3rvcc1vcgfjaxr5psixii8+ciagica8c3rvccbvzmzzzxq9ijywjsigc3rvcc1jb2xvcj0iizk5mzmzmyigc3rvcc1vcgfjaxr5psixii8+ciagica8c3rvccbvzmzzzxq9ijewmcuiihn0b3aty29sb3i9iim5otmzmzmiihn0b3atb3bhy2l0et0imsivpgogidwvbgluzwfyr3jhzgllbnq+ciagphjly3qged0imciget0imcigd2lkdgg9ijeiighlawdodd0imsigzmlsbd0idxjskcnncmfklxvjz2ctz2vuzxjhdgvkksiglz4kpc9zdmc+);     background: -moz-linear-gradient(top,  #cc3333 0%, #cc3333 43%, #993333 60%, #993333 100%); /* ff3.6+ */     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cc3333), color-stop(43%,#cc3333), color-stop(60%,#993333), color-stop(100%,#993333)); /* chrome,safari4+ */     background: -webkit-linear-gradient(top,  #cc3333 0%,#cc3333 43%,#993333 60%,#993333 100%); /* chrome10+,safari5.1+ */     background: -o-linear-gradient(top,  #cc3333 0%,#cc3333 43%,#993333 60%,#993333 100%); /* opera 11.10+ */     background: -ms-linear-gradient(top,  #cc3333 0%,#cc3333 43%,#993333 60%,#993333 100%); /* ie10+ */     background: linear-gradient(to bottom,  #cc3333 0%,#cc3333 43%,#993333 60%,#993333 100%); /* w3c */     filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#cc3333', endcolorstr='#993333',gradienttype=0 ); /* ie6-8 */      box-shadow: 0 1px 1px #777;     margin-top: 25px;     margin-right: auto;     margin-bottom: 10px;     margin-left: auto;     -moz-box-shadow: 0 0 5px 2px #888;     -webkit-box-shadow: 0 0 5px 2px #888;     box-shadow: 0 0 5px 2px #888;     border-radius:10px; }  #menu:before, #menu:after {     content: "";     display: table; }  #menu:after {     clear: both; }  #menu {     zoom:1; }  #menu li {     float: left;      position: relative; }  #menu {     float: left;     color: #fff;     text-decoration: none;     text-shadow: 0 1px 0 #000;     font-family:segoe print;      font-size: 16px;     font-weight: bold;     padding-top: 5px;     padding-right: 30px;     padding-bottom: 5px;     padding-left: 30px; }  #menu li:hover > {     color: #fafafa; }  *html #menu li a:hover { /* ie6 */     color: #fafafa; }  #menu ul {     margin: 20px 0 0 0;     _margin: 0; /*ie6 only*/     opacity: 0;     visibility: hidden;     position: absolute;     top: 38px;     left: 0;     z-index: 51;     background: #444;     background: linear-gradient(#444, #111);     box-shadow: 0 -1px 0 rgba(255,255,255,.3);     border-radius: 3px;     transition: .2s ease-in-out; }  #menu li:hover > ul {     opacity: 1;     visibility: visible;     margin: 0; }  #menu ul ul {     top: 0;     left: 150px;     margin: 0 0 0 20px;     _margin: 0; /*ie6 only*/     box-shadow: -1px 0 0 rgba(255,255,255,.3);       }  #menu ul li {     float: none;     display: block;     border: 0;     _line-height: 0; /*ie6 only*/     box-shadow: 0 1px 0 #111, 0 2px 0 #666; }  #menu ul li:last-child {        box-shadow: none;     }  #menu ul {         padding: 10px;     width: 150px;     _height: 7px; /*ie6 only*/     display: block;     white-space: nowrap;     float: none;     text-transform: none; }   #menu ul a:hover {     background-color: #f80033;     background-image: linear-gradient(#f80033, #955d61);  }  #menu li:hover {     border-radius:10px 10px 10px 10px;     background-color: #f80033;     background-image: linear-gradient(#f99, #955d61); }  #menu ul li:first-child > {     border-radius: 3px 3px 0 0; } 

in above code can't view horizontal menu in mozilla firefox , internet explorer.

your font-face property not supported because of quotes in property. use different type of quotes because of copy paste... because of problem, rest of css wont interpreted correctly in ff. ie, use *.eot font no format attribut.

see correct @font-face rule below :

@font-face {     font-family: 'segoe print';     src:url('fonts/segoe.eot') ,             url('fonts/segoe.woff') format('woff'),          url('fonts/segoe.ttf') format('truetype');   }