Simple Rounded Corners on Div

[rfox]

Searching the web, there seems to be a myriad of ways to achieve
rounded corners on a fixed-width div. I'm looking for suggestions on
the simplest, most straight-forward method of achieving this.

Thanks.

-Ray

[dorayme]

In article
<11*********************@i38g2000prf.googlegroups. com>,
rf**@scoe.net wrote:

Searching the web, there seems to be a myriad of ways to achieve
rounded corners on a fixed-width div. I'm looking for suggestions on
the simplest, most straight-forward method of achieving this.

You are likely to profit by reading:

http://www.sitepoint.com/article/bre...out-of-the-box

--
dorayme

[dorayme]

In article
<do**********************************@news-vip.optusnet.com.au>,
dorayme <do************@optusnet.com.auwrote:

In article
<11*********************@i38g2000prf.googlegroups. com>,
rf**@scoe.net wrote:

Searching the web, there seems to be a myriad of ways to achieve
rounded corners on a fixed-width div. I'm looking for suggestions on
the simplest, most straight-forward method of achieving this.

Perhaps more directly... you might care to adapt

http://www.neuroticweb.com/recursos/css-rounded-box/

to your purposes.

--
dorayme

[dorayme]

In article
<do**********************************@news-vip.optusnet.com.au>,
dorayme <do************@optusnet.com.auwrote:

In article
<11*********************@i38g2000prf.googlegroups. com>,
rf**@scoe.net wrote:

Searching the web, there seems to be a myriad of ways to achieve
rounded corners on a fixed-width div. I'm looking for suggestions on
the simplest, most straight-forward method of achieving this.

You are likely to profit by reading:

http://www.sitepoint.com/article/bre...out-of-the-box

Sorry about this... forget it. I was looking at it but the more
I see the more it worries me the fixation on pixels...

And about the url to that rounded corner generator, now that I
have time to look closer, you are likely to need to be a bit
handy with image manip programs... that generator at:

http://www.neuroticweb.com/recursos/css-rounded-box/

is actually rather wooden and does not always function correctly.
It does not always change the backgound colour for the little
images reliably!). But it is not a hard thing to get the gifs
right. Now, if you do not want the divs to be too rigid and you
anticipate big variations in size on different users machines,
you may have to em size all the relevant gifs for them to grow
and shrink right. There is no way out but to experiment. But lett
me not say this without doing it myself:
How about this adaptation:

<http://netweaver.com.au/test/roundCnr/roundCnrExperiment.html>

Seems to grow and adapt pretty well?

--
dorayme

[dorayme]

In article
<do**********************************@news-vip.optusnet.com.au>,
dorayme <do************@optusnet.com.auwrote:

you may have to em size all the relevant gifs

no... again, sorry, these are bg images, but I emmed other
things. I think I need antibiotics, I am crook... Fancy having to
go to the bloody doc and chemist instead of the beach on a day
like this in Sydney.

for them to grow
and shrink right. There is no way out but to experiment. But let
me not say this without doing it myself:
How about this adaptation:

<http://netweaver.com.au/test/roundCnr/roundCnrExperiment.html>

Seems to grow and adapt pretty well?

--
dorayme

[rfox]

Dorayme, sounds like you're havin' the same kind of Friday I am! :P

Thanks for the links. I checked 'em out and was impressed by the
generator, but realized that perhaps my rounded boxes aren't as
straight-forward as I thought. My layout calls for a lightly shaded
box with a darker stroke around the edge -- something the generator
can't pull off. I'm not even sure it can be pulled off. But I
appreciate your input.

-Ray

[Ben C]

On 2007-10-19, dorayme <do************@optusnet.com.auwrote:
[...]

><http://netweaver.com.au/test/roundCnr/roundCnrExperiment.html>

This looks doesn't look so good in Firefox.

The problem seems to be that you're setting "font-size: 1px; height:
1em" on the divs that contain the curved bits.

If the font-size is 1px then 1em should be about 1px, so Firefox looks
right to me. But Konqueror and Opera both make those boxes much higher.

[Jim Moe]

On 10/18/07 05:58 pm, rf**@scoe.net wrote:

Searching the web, there seems to be a myriad of ways to achieve
rounded corners on a fixed-width div. I'm looking for suggestions on
the simplest, most straight-forward method of achieving this.

None of those myriad appealed to you?
<http://www.html.it/articoli/nifty/index.html>

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[dorayme]

In article <sl*********************@bowser.marioworld>,
Ben C <sp******@spam.eggswrote:

On 2007-10-19, dorayme <do************@optusnet.com.auwrote:
[...]

<http://netweaver.com.au/test/roundCnr/roundCnrExperiment.html>

This looks doesn't look so good in Firefox.

The problem seems to be that you're setting "font-size: 1px; height:
1em" on the divs that contain the curved bits.

If the font-size is 1px then 1em should be about 1px, so Firefox looks
right to me. But Konqueror and Opera both make those boxes much higher.

Thanks Ben. I was trying to serve up something to help OP and
changed a few things I thought needed more fluid treatment... I
looked in Opera and Camino, you are right, it was bad! Hope it it
better now, I just put the font-size concerned into em without
thinking further about it, it seems to work now.

--
dorayme