Avatar for Username

Prohledat stránky podpory

Vyhněte se podvodům. Za účelem poskytnutí podpory vás nikdy nežádáme, abyste zavolali nebo poslali SMS na nějaké telefonní číslo nebo abyste sdělili své osobní údaje. Jakékoliv podezřelé chování nám prosím nahlaste pomocí odkazu „Nahlásit zneužití“.

Zjistit více

Toto vlákno bylo archivováno. Pokud potřebujete pomoci, založte prosím nový dotaz.

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

  • 5 odpovědí
  • 2 mají tento problém
  • 412 zobrazení
  • Poslední odpověď od 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>

Upravil uživatel cor-el dne

Zvolené řešení

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;
Přečíst dotaz v kontextu 👍 0

Všechny odpovědi (5)

jscher2000 - Support Volunteer
jscher2000 - Support Volunteer
  • Top 10 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 Autor dotazu
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 Autor dotazu
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

Zvolené řešení

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 Autor dotazu
more options

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