Question

How would you guys make a solid ball of specific size and position so that the size or the position will not change according to its outer element. ( in the major browsers )

Lets say the outer element would be another ball that is always white.

Of course number one might be to use image of a solid ball.. depending on the case but, what about if i wanted the inner ball color to be easily editable.

So: How to achieve editable ball of specific size and position so that either one wont change on any major browser? ( considering that shape should also stay intact in all major browsers )

Only editable factor would have to be the color of it.

Answer 1

may be can use border-radius to make the div a circle. So it can be easy for you to edit the color of div. For position you can define position absolute or fixed to it.

FOR EXAMPLE

div{
    -webkit-border-radius: 999px;
        -moz-border-radius: 999px;
        border-radius: 999px;
        behavior: url(PIE.htc);
    position:absolute;
    top:20px;
    right:50px;
    width:200px;
   height:200px;
}

check this examples.

Easier way to create circle div than using an image?

How to use CSS to surround a number with a circle?