Issues in validating CSS3

Question

Here is my CSS3 code.

body
{
    background-color: #fdf4d5;
    font-family: "Times New Roman", Times, serif;
    font-size: 100%;
    line-height: 1.5;
    text-align: left;
}
a
{
    text-decoration: none;
}
a:link, a:visited
{
    color: #C80000;
}
a:active
{
    background-color: #C80000;
    color: #FFF;
}
.body
{
    clear: both;
    margin: auto;
    width: 70%;
}
.mainHeader img
{
    height: auto;
    margin: 0 0;
    width: 100%;
}
.mainHeader nav
{
    background-color: #faa01e;
    border-radius: 5px;
    height: 60px;
    moz-border-radius: 5px;
    webkit-border-radius: 5px;
}
.mainHeader nav ul
{
    list-style: none;
    margin: 0 auto;
}
.mainHeader nav ul li
{
    color: #FFF;
    display: inline;
    float: left;
}
.mainHeader nav a:link, .mainHeader nav a:visited
{
    color: #FFF;
    display: inline-block;
    height: 30px;
    padding: 15px 80px;
}
.mainHeader nav a:hover, .mainHeader nav a:active, .mainHeader nav .active a:link, .mainHeader nav .active a.visited
{
    background: #C80000;
    color: #FFF;
    text-shadow: none;
}
.mainHeader nav ul li a
{
    border-radius: 5px;
    height: 60px;
    moz-border-radius: 5px;
    webkit-border-radius: 5px;
}
.mainContent
{
    border-radius: 5px;
    line-height: 25px;
    moz-border-radius: 5px;
    webkit-border-radius: 5px;
}
.content
{
    border-radius: 5px;
    float: left;
    moz-border-radius: 5px;
    webkit-border-radius: 5px;
    width: 70%;
}
.content img
{
    border-radius: 5px;
    height: auto;
    margin: 0 0;
    moz-border-radius: 5px;
    webkit-border-radius: 5px;
    width: 100%;
}
.content p:first-letter
{
    text-transform: uppercase;
}
.content p
{
    color: #000;
    font-family: "Adobe Caslon Pro", "Hoefler Text", Georgia, Garamond, Times, serif;
    font-size: 14pt;
    font-variant: small-caps;
    letter-spacing: 0.1em;
    line-height: 145%;
    margin: 40px auto;
    text-align: left;
    text-transform: lowercase;
}
.bottomContent
{
    border-radius: 5px;
    moz-border-radius: 5px;
    padding: 3% 0;
    webkit-border-radius: 5px;
}
.boxOne
{
    border-radius: 5px;
    float: left;
    moz-border-radius: 5px;
    webkit-border-radius: 5px;
    width: 30%;
}
.boxTwo
{
    border-radius: 5px;
    float: left;
    moz-border-radius: 5px;
    webkit-border-radius: 5px;
    width: 30%;
}
.boxOne img
{
    border-radius: 5px;
    height: auto;
    margin: 0 0;
    moz-border-radius: 5px;
    webkit-border-radius: 5px;
    width: 100%;
}
.boxTwo img
{
    border-radius: 5px;
    height: auto;
    margin: 0 0;
    moz-border-radius: 5px;
    webkit-border-radius: 5px;
    width: 100%;
}
.mainFooter
{
    background-color: #FAA01E;
    border-radius: 5px;
    float: left;
    margin: 2% 0;
    moz-border-radius: 5px;
    webkit-border-radius: 5px;
    width: 100%;
}
.mainFooter p
{
    color: #FFF;
    float: right;
    margin: 2% auto;
    width: 92%;
}

I have used the following website to validate the code. http://jigsaw.w3.org/css-validator/validator

Once I validated it I have received lot of errors.In fact 22 errors and 10 warnings! I'm a newbie who is learning html5 and css3 on my own.I'm really happy I have come this far.But I need some help from experts like you to correct the errors. I just corrected my html5 code relating to this css3 code with some help from this forum.But it had only 1 error.But this is too much. What went wrong? Please help me.Thank you very much.

Answer 1

You are using the wrong properties for your Mozilla and Webkit compatibility.

You have:

moz-border-radius:
webkit-border-radius:

And it should be

-moz-border-radius:
-webkit-border-radius:

Actually you can just use border-radius. But that's where the errors are coming from.

Answer 2

The issue is that you are using proprietary properties without a - before their names, so you need to do that.

For example moz-border-radius should be

  -moz-border-radius
--^--

same goes for -webkit properties as well, so webkit-border-radius should be

  -webkit-border-radius
--^--

---

Also, you can click on More Options to get a precised validation.

Answer 3

Validator complains about usage of incorrect prefixes moz- and webkit-. You should add dashes in front of them. But better remove them all together. So the next rules are not needed:

-moz-border-radius: 5px;
-webkit-border-radius: 5px;

and you can safely use

border-radius: 5px;

unless you want to support couple of old browsers. All modern browsers support border-radius without prefixes. See support here.