Two CSS errors, I want to fix it

Hi,

I try to validate my css, but I have two errors:

- here is my css file http://www.wallpaperfx.com/public/design/frontend/wallsfx/css/main.css
- these are the errors:

24 a Property -moz-outline-style doesn't exist : none none
28 a:hover Property -moz-outline-style doesn't exist : none none

Does anyone knows how to fix it,
I would appreciate.
Thanks.

 

Those are" Mozilla-specific version of the outline-style property that specifies a style for an outline", remove them will have no error.

 

While the validator will show those as errors, vendor extensions such as this are perfectly valid markup and do not need to be removed.

 

solved
thanks to all.

 

Actually, they are not quite valid markup. Yes, -moz- is valid to Mozilla, invalid to other browsers. Same with other CSS browser extensions being invalid to other browsers but valid to their own. The validator showing those errors is showing what it should, that those extension are not apart of the CSS standard and are invalid according to w3c.

However, sometimes the browser extensions are a necessary evil. In this case, its not. -moz-outline- is obsolete to Mozilla. You can just use outline alone. Secondly, outline is not inherited and therefore, in most circumstance, there is no need to set outline-style to none. So, as radiant_luv said, it can be removed.

 

They are, indeed, valid. The specs clearly set out the cases for their use. Where the validator chokes is on the specific proprietary properties or values, which it cannot validate due to not being a part of the css version being tested. For example, the coder might have written {-moz-outlien-style: none;}. The validator has no way to know whether that's correct or not, so cannot validate it.

No, not invalid; just unknown. The specs allow for that. If a property or value is not recognized, it is to be ignored. Otherwise, you've couched a specious argument.

More often, they're a necessary good. The W3C requires two or more implementations of a specification before it can be adopted. The -moz-, -o-, -ms-, -khtml-, -webkit-, etc. allow vendors to test their implementations, and bring them back to the table to iron out problems and differences. By extension, it allows web developers to test, learn and comment before final implementation.

Not quite completely true. If a developer is supporting Firefox2, the -moz-outline* property and -moz-inline-box display value are still required.

Make that, "in many circumstances". If any of a, a:link, a:focus had an outline set, unsetting would be required for a:hover.

cheers,

gary

 

Maybe my assertion was based on the older drafts of the specification and older statements by w3c members. If vendor-specific extensions are completely valid, then I appologize for the statement. However, please observe the argument given by Roger Johansson concerning validity.

I used the word "obsolete" as that is the term used on Mozilla's developer documents, though "deprecated" may be a better translations. I purposely ignored its use for support in Firefox 2 because there in lies one of the evils of vendor extensions. Keeping legacy vendor extensions code in stylesheets can result in bulky code and could confuse newer versions of browsers as they support the vendor extension and the final.

 

I disagree with Roger on this one. He says,

The thing is, the specification clearly defines what constitutes a valid vendor's proprietary extension. I submit that the 'invalid' label hung on them is due to their being unknown, not because they're invalid. Of course, it really doesn't matter because they do their jobs, working as expected.

Do they bulk up the code? Maybe. Depends on whether you want to use some property for a browser that does not yet support a non-proprietary version. Consider this css3 property:

pre {
     width: 33em;
     border: solid red;

    -moz-transform: translate(100px) rotate(40deg);
    -moz-transform-origin: 60% 100%;

    -webkit-transform: translate(100px) rotate(40deg);
    -webkit-transform-origin: 60% 100%;

    -o-transform:translate(100px) rotate(40deg); 
    -o-transform-origin:60% 100%;
}

Code (markup):

Is it bulky? Yeah, but how are you gonna make it work in today's browser without the proprietary properties? Once it's supported by some vendor, add the general property below the others.

  transform:translate(100px) rotate(40deg); 
  transform-origin:60% 100%;

Code (markup):

No, there will be no confusion. Remember that only the last understood version is applied. If there is {-moz-foo: bar;} followed by {foo: bar;}, foo will override -moz-foo if understood.

cheers,

gary