CODEWITHSUNDEEP
css
Justin808
Justin808

Reputation: 21522

css3 rounded borders oddness

Here is a page i'm working on. In Chrome, FF4 and webkit nightly the ellipsis in the bottom left look good, in FF3 they look rounded top and bottom, straight sides and safari 5 they are rectangular. (I haven't looked in any other browsers)

Is there anyway to get Safari 5 and FF3 to play nice?

Update:

Setting the radius with the following makes Safari 5 work like FF3, rounded top and bottom with straight sides.

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

So the remaining issue is the ellipsis are not elliptical in FF3 or Safari 5.

Update2:

Looks like FF3 and Safari5 have issues with borders and how the are calculated, there is no way for fix the issue that I've found so far.

Upvotes: 2

Views: 113

Answers (1)

Ben
Ben

Reputation: 21249

Use px radius instead of % and the problem goes away (seems to work for the orbiter on Safari in the dev inspector)

Looks like you're recalculating the width and height of the orbit object, you could recalculate the radius at the same time.

P.s. It's good to know % radius don't work the same on all browsers, nice find

Upvotes: 1

Related Questions