Avatar for Username

Cari Bantuan

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.

Pelajari Lebih Lanjut

Utas ini telah diarsipkan. Silakan membuat pertanyaan baru jika Anda membutuhkan bantuan.

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

  • 5 balas
  • 2 memiliki masalah ini
  • 7 kunjungan
  • Balasan terakhir oleh 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>

Diperbarui oleh cor-el pada

Solusi terpilih

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;
Baca jawaban ini dalam konteks 👍 0

Semua Balasan (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 Pemilik pertanyaan
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 Pemilik pertanyaan
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

Solusi Terpilih

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 Pemilik pertanyaan
more options

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