Question

Border radius not working in my web using firefox 18.0.2 using -moz or without

I'm using the code below for the menu of my web and it works perfect in Safari 5 and in my html editor Coda but the rounded corners are missing in Firefox 18.0.2 on my iMac, did tried several changes without success ┬┐can you help me please? The code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Apple Menu In CSS3 Only</title>
<style type="text/css">
body {
     background: #ddd;
     margin: 30px;
}
#menu     { 
     float: left;
     padding: 0;
     margin: 0;
      
     /* Box Shadow */
     box-shadow: 0 1px 0 #000;
     -moz-box-shadow: 0 1px 0 #000;
     -webkit-box-shadow: 0 1px 0 #000;
      
     /* Rounded Corners */
     -moz-border-radius-topleft: 10px;
    -moz-border-radius-bottomleft: 10px;
     -webkit-border-top-left-radius: 10px;
     -webkit-border-bottom-left-radius: 10px;
      
     /* Rounded Corners */
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright: 10px;
     -webkit-border-top-right-radius: 10px;
     -webkit-border-bottom-right-radius: 10px;
}
#menu ul  {
     border-top: #f3f3f3 1px solid;
     padding: 0;
     margin: 0;
     float: left;
      
     /* Background Gradient */
    background-image: -moz-linear-gradient(top, #b4b4b4, #707070);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#b4b4b4), to(#707070));
}
#menu li  {
     float: left;
     list-style: none;
     background: none;
     margin-right: 1px;
}
#menu a { outline: none; }
#menu li a:link, #menu li a:visited {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 14px;
     font-weight: bold;
     display: block;
     color: #262626;
     padding: 12px 28px;
     text-decoration: none;
     text-transform: capitalize;
      
     /* CSS3 Text Shadow */  
     text-shadow: 0px 1px 1px #fff;
      
     /* CSS3 Background Gradient */
    background-image: -moz-linear-gradient(top, #cacaca, #848484);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#cacaca), to(#848484));
}
#menu li a:hover    {
     cursor: pointer;
     color: #fff;
     text-shadow: 0px -1px 1px #000;
      
     /* Background Gradient */
    background-image: -moz-linear-gradient(top, #929292, #545454);
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#929292), to(#545454));
}
#menu li:first-child a, #menu ul {
     /* Rounded Corners */
     -moz-border-radius-topleft: 10px;
    -moz-border-radius-bottomleft: 10px;
     -webkit-border-top-left-radius: 10px;
     -webkit-border-bottom-left-radius: 10px;
}
#menu li:last-child a, #menu ul {
     /* Rounded Corners */
    -moz-border-radius-topright: 10px;
    -moz-border-radius-bottomright: 10px;
     -webkit-border-top-right-radius: 10px;
     -webkit-border-bottom-right-radius: 10px;
}
a.active:link, a.active:active, a.active:visited  {   
     color: #fff !important;
     text-shadow: 0px -1px 1px #000!important;
    background-image: -moz-linear-gradient(top, #444, #666)!important;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#444), to(#666))!important;
      
     /* Box Shadow */
     box-shadow: inset 0 0 10px #000;
     -moz-box-shadow: inset 0 0 10px #000;
     -webkit-box-shadow: inset 0 0 10px #000;
}
</style>
</head>
<body>
     <div id="menu">
          <ul>
               <li><a class="active" href="index.html">home</a></li>
               <li><a href="menu.html">menu</a></li>
               <li><a href="project.html">projects</a></li>
               <li><a href="affiliates.html">affiliates</a></li>
               <li><a href="contact.html">contact</a></li>
          </ul>
     </div>
</body>
</html>
↓ Show more ↑ Show less
  • All posts
  • Helpful Solutions
  • post
  • owner
  • owner
  • solution
  • owner