Avatar for Username

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

This thread was archived. Please ask a new question if you need help.

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

  • 5 replies
  • 2 have this problem
  • 7 views
  • Last reply by Barbarossa

Barbarossa
Barbarossa
more options

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>
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: <pre><nowiki><!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></nowiki></pre>

Modified by cor-el

Chosen solution

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;
Read this answer in context 👍 0

All Replies (5)

jscher2000 - Support Volunteer
jscher2000 - Support Volunteer
  • Top 25 Contributor
more options

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

Barbarossa
Barbarossa Question owner
more options

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

Barbarossa
Barbarossa Question owner
more options

The code: <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>

cor-el
cor-el
  • Moderator
  • Top 10 Contributor
more options

Chosen Solution

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;
Barbarossa
Barbarossa Question owner
more options

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