cancel
Showing results for 
Search instead for 
Did you mean: 

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

SOLVED
Highlighted
New Contributor

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>
1 ACCEPTED SOLUTION

Accepted Solutions
Site Moderator

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

You are using the wrong syntax/spelling for the individual border radius properties.

See https://developer.mozilla.org/en-US/docs/CSS/border-radius

Note: Support for the prefixed version (-moz-border-radius) was removed in Gecko 13.0 (Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10).
/* Rounded Corners */
-moz-border-top-left-radius: 10px;
-moz-border-bottom-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
      
/* Rounded Corners */
-moz-border-top-right-radius: 10px;
-moz-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
5 REPLIES
Legendary Contributor

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

Right, you definitely need to remove the -moz- prefix for Firefox 13 and newer, or add the unprefixed border-radius property and keep support for earlier versions if you prefer.

You can review the current syntax here:

https://developer.mozilla.org/en-US/docs/CSS/border-radius

New Contributor

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

I did remove the: -imoz but the corners are still gone I did read the page you send and made the changes but it didn't work

New Contributor

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

The code: <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <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>

Site Moderator

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

You are using the wrong syntax/spelling for the individual border radius properties.

See https://developer.mozilla.org/en-US/docs/CSS/border-radius

Note: Support for the prefixed version (-moz-border-radius) was removed in Gecko 13.0 (Firefox 13.0 / Thunderbird 13.0 / SeaMonkey 2.10).
/* Rounded Corners */
-moz-border-top-left-radius: 10px;
-moz-border-bottom-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
      
/* Rounded Corners */
-moz-border-top-right-radius: 10px;
-moz-border-bottom-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
New Contributor

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

It's too late now in Spain, tomorrow morning I wiil try it and tell you Thanks