Rounded corners not working in Firefox

[elliotnewman]

http://www.elliotnewman.com/index/test8.htmlI have picked up some code that seems to round off corners to my div tags nicely - I use:

#box_left {	-webkit-border-radius: 6px;	-moz-border-radius: 6px;	border-radius: 6px;

It seems to work ok in Safari, for example the divs "box_left" and "box_right" both have this.Is there something really obviously wrong with my code?Thanks, Elliot.

[Synook]

Well, property names that start with - are browser-specific, that is, they only works in a certain rendering agent (e.g. -webkit only works in webkit), and are thus not part of any official standard and are invalid. However, they still work.So, your code does work, but only in Webkit browsers, Gecko browsers, and such browsers that support the CSS3 border-radius. And it's invalid.

[elliotnewman]

Yes, so does that mean I am missing the required code for it to work in Firefox?

[Synook]

No, Firefox uses Gecko, which was developed under the oversight of the the Mozilla Foundation (hence -moz).https://developer.mozilla.org/en/css/-moz-border-radius

[real_illusions]

What version Firefox are you using?

[Howdy_McGee]

I believe only the newest version supports only a handful of HTML 5 tags, so even though your rounded borders might work in FireFox, they won't work in Internet Explorer, Opera, or K-Meleon.

[real_illusions]

I believe only the newest version supports only a handful of HTML 5 tags, so even though your rounded borders might work in FireFox, they won't work in Internet Explorer, Opera, or K-Meleon.

Rounded corners are a CSS3 spec, not HTML 5

[MitzeMitchell]

I checked it out in FF 3.5.10 and it appears to work correctly.It's a little difficult to see it though. With the bottom gradient, it doesn't appear at all. I took your code into an editor and added {margin-top: 20px;} and the radius really became a lot more apparent. With it sitting so close to the #image, just a little difficult to see it (in my opinion at least).As for your current code though, it seems to work fine for me. Hope this helps!

[thescientist]

try clearing your cache.

[dink]

No, Firefox uses Gecko, which was developed under the oversight of the the Mozilla Foundation (hence -moz).https://developer.mozilla.org/en/css/-moz-border-radius

Thanks for the link Synook! Lots of information available.dink

[elliotnewman]

yes thanks for the link. I am using firefox 2.0 .... that must be why ;0 I just assumed it would have been supported for sometime in CSS so was not concerned about the age of my version of FF, I was wrong.MitzeMitchell - thanks, yes I kind of want it to be subtle, I don't want to overdo it, plus giving other browsers do not support it I don't want the design feeling too different with the rounded corners, but perhaps another pixel or two would help.Thanks all! good stuff.

[real_illusions]

yes thanks for the link. I am using firefox 2.0 .... that must be why ;0

Yup, best to keep your browser updated as best as you can. Firefox is currently on version 3.6 at the time of this post.