O CSS Masters, rounded corners so close

[berkeleyB]

I have given an earnest try, following the directions found at
<http://www.w3.org/Style/Examples/007/roundshadow.html>

The result is Close, so close! But not working...
<http://ewasteinsights.info/survey/serviceForm.html>

perhaps a small bit of light shed on my looming darkness??

[berkeleyB]

In article <ne**************************@newsclstr02.news.pro digy.com>,
berkeleyB <ne****@screenlightDOT.com> wrote:

I have given an earnest try, following the directions found at
<http://www.w3.org/Style/Examples/007/roundshadow.html>

The result is Close, so close! But not working...
<http://ewasteinsights.info/survey/serviceForm.html>

perhaps a small bit of light shed on my looming darkness??

UPDATE - I clued in to a couple of details: the middle repeater element
*does* have to reach all the way across to the left edge; I took away a
surrounding style and simplified the html on the page; and its better to
have the slices be exactly on the edges (even though it is a transparent
background image in Fireworks)

SO I am left with a simpler execution with slightly different
problems. That is the images specified in myStyle::before{ content: }
and myStyle::after{ content: } are both aligned to the very left of the
page, but the center repeater, myStyle::before{ background: } and
myStyle::after{ background: } are indented about 6 pixels. SO the visual
is that the top and bottom left corners are broken away to the left by 6
pixels, while everything else is dandy.

the whole style declaration is below. Advice welcome!!
..addInfo::before { display: block; line-height: 0;
background: url(CaptionBox_r2_c3.gif) top right no-repeat;
content: url(CaptionBox_r2_c2.gif) }

..addInfo::after { display: block; line-height: 0;
background: url(CaptionBox_r4_c3.gif) bottom right no-repeat;
content: url(CaptionBox_r4_c2.gif) }

..addInfo { font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: medium; font-style: normal; font-weight: normal; color:
#000000; vertical-align: default; background-color: #F5F5F5;
border-color: #FFFFFF; max-width: 600px; background:
url(CaptionBox_r3_c2.gif) right repeat-y }

[josh]

I can't help you with your problem....but If you don't mind javascript,
there is another method to getting rounded corners that I like alot:
http://pro.html.it/print_articolo.as...99/stampa.html

[Spartanicus]

berkeleyB <ne****@screenlightDOT.com> wrote:

[Apparently about "rounded corners"]

I have given an earnest try, following the directions found at
<http://www.w3.org/Style/Examples/007/roundshadow.html>

W3C is not a good place to look for practical authoring examples. There
are probably much better examples on the net
http://www.google.com/search?q=css+round+borders

--
Spartanicus

[google]

berkeleyB wrote:

I have given an earnest try, following the directions found at
<http://www.w3.org/Style/Examples/007/roundshadow.html>
The result is Close, so close! But not working...
<http://ewasteinsights.info/survey/serviceForm.html>
perhaps a small bit of light shed on my looming darkness??

Hello,

I have a small program I wrote that produces some good rounded corner
code, if you want to take a look at a working example:

http://www.impliedbydesign.com/rocki...d-corners.html

You can easily adjust the images for the look you're going for.

Chris S.

Free Web Design Tools
http://www.impliedbydesign.com/free-...e-scripts.html