rounded corners - and no tables

Hey, look, Ma! No tables!

Here is my attempt at making rounded corners. It uses a bunch of element
layers to merge 4 background images. But, it seems to work. Now if there
was just a way to style someone else's arbitrary single DIV container this
way.

The 4 boxes shown have slightly increasing corner radii:

http://phil.ipal.org/usenet/ciwas/2006-05-02/rcb1.html

The quick way to see the CSS:

http://phil.ipal.org/usenet/ciwas/2006-05-02/rcb1.css

And in case your browser doesn't render this right, here is what my Firefox
1.5.0.2 does:

http://phil.ipal.org/usenet/ciwas/2006-05-02/rcb1.png

I have no idea if this works in IE, and no convenient way at the moment
to try it out.

--
-----------------------------------------------------------------------------

Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
(first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------

Deciding to do something for the good of humanity,
<phil-news-nospam (AT) ipal (DOT) net> declared in
comp.infosystems.www.authoring.stylesheets:

http://phil.ipal.org/usenet/ciwas/2006-05-02/rcb1.html

I have no idea if this works in IE, and no convenient way at the moment
to try it out.

It doesn't - the rounded corners are not visible at all.

--
Mark Parnell
My Usenet is improved; yours could be too:
http://blinkynet.net/comp/uip5.html

On Wed, 3 May 2006 14:30:48 +1000 Mark Parnell <webmaster (AT) clarkecomputers (DOT) com.au> wrote:

Deciding to do something for the good of humanity,
phil-news-nospam (AT) ipal (DOT) net> declared in
comp.infosystems.www.authoring.stylesheets:

http://phil.ipal.org/usenet/ciwas/2006-05-02/rcb1.html

I have no idea if this works in IE, and no convenient way at the moment
to try it out.

It doesn't - the rounded corners are not visible at all.

As I found out last night from someone on IRC that tried it (and gave me a
PNG screen capture). Maybe some other way to specify the image URLs in the
CSS might work, but for now it's not practical for me to experiment since I
don't have IE running here right now. But at least it seems to degrade in
a graceful way to square corners without being mangled. So while IE users
won't see all of the intended style, they could see most of it, and see all
of the content. For that, it won't bother me to use this method (when IE
users are in my audience, as they likely will be).

--
-----------------------------------------------------------------------------

Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
(first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------

phil-news-nospam (AT) ipal (DOT) net wrote:

On Wed, 3 May 2006 14:30:48 +1000 Mark Parnell <webmaster (AT) clarkecomputers (DOT) com.au> wrote:
| Deciding to do something for the good of humanity,
| <phil-news-nospam (AT) ipal (DOT) net> declared in
| comp.infosystems.www.authoring.stylesheets:
|
|> http://phil.ipal.org/usenet/ciwas/2006-05-02/rcb1.html
|
|> I have no idea if this works in IE, and no convenient way at the moment
|> to try it out.
|
| It doesn't - the rounded corners are not visible at all.

As I found out last night from someone on IRC that tried it (and gave me a
PNG screen capture). Maybe some other way to specify the image URLs in the
CSS might work, but for now it's not practical for me to experiment since I
don't have IE running here right now. But at least it seems to degrade in
a graceful way to square corners without being mangled. So while IE users
won't see all of the intended style, they could see most of it, and see all
of the content. For that, it won't bother me to use this method (when IE
users are in my audience, as they likely will be).

In that case you might as well just specify:

-moz-border-radius for gecko based browsers (moz,ff)
-khtml-border-radius for khtml based browsers (konqueror, safari)
border-radius for css3 compliant browsers (aka the future)

Michael Vilain wrote:

In article <e3b1i9$mgr$1 (AT) news3 (DOT) tilbu1.nb.home.nl>,
m00dekoe <anonymous (AT) example (DOT) com> wrote:

phil-news-nospam (AT) ipal (DOT) net wrote:
On Wed, 3 May 2006 14:30:48 +1000 Mark Parnell
webmaster (AT) clarkecomputers (DOT) com.au> wrote:
| Deciding to do something for the good of humanity,
| <phil-news-nospam (AT) ipal (DOT) net> declared in
| comp.infosystems.www.authoring.stylesheets:
|
|> http://phil.ipal.org/usenet/ciwas/2006-05-02/rcb1.html
|
|> I have no idea if this works in IE, and no convenient way at the moment
|> to try it out.
|
| It doesn't - the rounded corners are not visible at all.

As I found out last night from someone on IRC that tried it (and gave me a
PNG screen capture). Maybe some other way to specify the image URLs in the
CSS might work, but for now it's not practical for me to experiment since I
don't have IE running here right now. But at least it seems to degrade in
a graceful way to square corners without being mangled. So while IE users
won't see all of the intended style, they could see most of it, and see all
of the content. For that, it won't bother me to use this method (when IE
users are in my audience, as they likely will be).

In that case you might as well just specify:

-moz-border-radius for gecko based browsers (moz,ff)
-khtml-border-radius for khtml based browsers (konqueror, safari)
border-radius for css3 compliant browsers (aka the future)

I googled "-khtml-border-radius" and it found no relevant hits. It
asked if I really wanted "-html-border-radius". Got a URL that explains
this property in depth?

TIA!

be sure to include the quotes when feeding it to google
("-khtml-border-radius"), I guess it will be searching for anything
without 'khtml-border-radius' in it if you don't include the quotes. I
hear (as in read it but haven't checked) Opera supports the
border-radius property already, too.

On Wed, 03 May 2006 21:50:33 +0200 m00dekoe <anonymous (AT) example (DOT) com> wrote:

phil-news-nospam (AT) ipal (DOT) net wrote:
On Wed, 3 May 2006 14:30:48 +1000 Mark Parnell <webmaster (AT) clarkecomputers (DOT) com.au> wrote:
| Deciding to do something for the good of humanity,
| <phil-news-nospam (AT) ipal (DOT) net> declared in
| comp.infosystems.www.authoring.stylesheets:
|
|> http://phil.ipal.org/usenet/ciwas/2006-05-02/rcb1.html
|
|> I have no idea if this works in IE, and no convenient way at the moment
|> to try it out.
|
| It doesn't - the rounded corners are not visible at all.

As I found out last night from someone on IRC that tried it (and gave me a
PNG screen capture). Maybe some other way to specify the image URLs in the
CSS might work, but for now it's not practical for me to experiment since I
don't have IE running here right now. But at least it seems to degrade in
a graceful way to square corners without being mangled. So while IE users
won't see all of the intended style, they could see most of it, and see all
of the content. For that, it won't bother me to use this method (when IE
users are in my audience, as they likely will be).


In that case you might as well just specify:

-moz-border-radius for gecko based browsers (moz,ff)
-khtml-border-radius for khtml based browsers (konqueror, safari)
border-radius for css3 compliant browsers (aka the future)

I now already have multi-layer borders. Next I'll be doing shadow borders.
Are these special custom properties supporting all that?

--
-----------------------------------------------------------------------------

Phil Howard KA9WGN | http://linuxhomepage.com/ http://ham.org/ |
(first name) at ipal.net | http://phil.ipal.org/ http://ka9wgn.ham.org/ |
-----------------------------------------------------------------------------