Jump to content
elliotnewman

Rounded corners not working in Firefox

Recommended Posts

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.

Edited by Elliot Newman

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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 :)

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

try clearing your cache.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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.:)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...