Border-Radius Causing Naughty Errors in FireBug: "Unknown property... Declaration dropped." Should I make this disappear or better keep it my way?

Question

today I hit F12 in FF to load FireBug to see what my site was thinking. Then saw this:

The facts showing from above:

• My site likes using them "rounded", alot of them...;
• My site is loaded with errors, at least as FireBug sees it.

Is FireFox right and should I assess this and if so how do I change it since I think this is crucial for IE and is the default CSS3 spec, right? Or is there something else happening thats causing all this things to show up in FireBug? I would be happy to hear what I should do to make all this disappear again, really.

Answer 1

Open the drop down in your console tab and un-tick stuff like "show CSS errors".

Also, it's not a bad thing. If Firefox comes across a property it doesn't know (such as border-radius at the time this question was asked) it will just ignore it and continue with the next property. This is why for instance -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; works. Firefox will ignore the -webkit- prefixed one, it would recognize the -moz- prefixed one and ignore the non-prefixed one because the non-prefixed one had not yet been implemented in the version of Firefox you used. (It is now no longer needed to prefix border-radius unless you're supporting an ancient browser)

Answer 2

You might want to pop the IE-specific properties (filter and zoom) into an IE-specific stylesheet, and include that with conditional comments.

As for the rest, you’ve just got an older version of Firefox that doesn’t recognise the newer properties. That’s fine, it won’t do any harm. (Somewhat odd that moz-opacity isn’t recognised, as I thought that had been around for ages, but it’s fine.)