Re: [WSG] Rounded Courners .... Your Take

[Gunlaug Sørtun]

James Jeffery wrote:

What methods do you find best when creating rounded corners and which
methods are the most supported?

I have been using span tags and absolute positioning. I have also 
recently started to use the sliding doors method because you can 
achive nice rounded boxes with some nice effects, even better if you

use PNG's.



Lets have your beloved methods then guys.


I add shapes by CSS-manipulating a number of script generated elements -
divs - above and below a box.

In its most basic form the boxes may come out like this...



...where ordinary CSS-borders are used on all but the last example.
(There's a 1px flaw in IE7 (and IE6 in standard mode) I haven't yet
bothered to correct for in the demo page itself. An ordinary 'hasLayout'
trigger does it in CSS anyway.)

I use 'onDOMContentLoaded' for the script to prevent flickering and
changes as the page gets completed, and add background colors and images
as I see fit.

There are of course very few limitations when it comes to styling the
generated elements. I add as many as I need in each case, and they are
not limited to enhancing corners.

I tend to go for the flat form with simple bordered shapes, and just
fill the generated elements with the box' background. Goes with any
page-background.

regards
Georg
--
http://www.gunlaug.no


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] Rounded Courners .... Your Take

[Mike at Green-Beast.com]

Jixor - Stephen I wrote:
> http://jixor.com/Stuff/Web/Panes

Thanks. That's clever and simple.

Cheers.
Mike



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] Rounded Courners .... Your Take

[Jixor - Stephen I]

No worries, I use threaded view in my mail client so its easy for me to 
backtrack.


http://jixor.com/Stuff/Web/Panes

Mike at Green-Beast.com wrote:

Jixor - Stephen I wrote:
  
Mike check out the example I posted earlier and you 
can see how it can be done without all the extra markup.



I need a link please.

Mike


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***


  




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] Rounded Courners .... Your Take

[Mike at Green-Beast.com]

Jixor - Stephen I wrote:
> Mike check out the example I posted earlier and you 
> can see how it can be done without all the extra markup.

I need a link please.

Mike


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] Rounded Courners .... Your Take

[Jixor - Stephen I]

Mike check out the example I posted earlier and you can see how it can 
be done without all the extra markup.


Mike at Green-Beast.com wrote:

I can offer this simple method:
http://mikecherim.com/experiments/css_smart_corners.php

I prefer spans over divs because divs do have semantic value as divisions 
whereas span are like puffs of air in that they serve as nothing more than a 
hook for styles, etc. I'd rather offer a span to accept the background than 
a full div.


That's my take on it anyway.

Cheers.
Mike Cherim
http://green-beast.com/





***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***


  




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] Rounded Courners .... Your Take

[Dave Woods]

Hi Mike,

I was considering using 's instead of 's for my example but
was a little torn between the two as I'd usually use 's for
their inline purpose in a block of text or for styling something
within an inline element (when obviously a  would be invalid).

I suppose in either case it's using the tag for something that it
wasn't really meant for and as someone mentioned earlier is being
misused slightly due to lack of a better alternative using CSS2.1

Your example does highlight the fact that I could probably do away
with the topleft div in any case though as this could be applied to
container  :o)

Thanks
Dave

- - - - - - - - - -
http://www.dave-woods.co.uk


On 31/10/2007, Mike at Green-Beast.com <[EMAIL PROTECTED]> wrote:
> I can offer this simple method:
> http://mikecherim.com/experiments/css_smart_corners.php
>
> I prefer spans over divs because divs do have semantic value as divisions
> whereas span are like puffs of air in that they serve as nothing more than a
> hook for styles, etc. I'd rather offer a span to accept the background than
> a full div.
>
> That's my take on it anyway.
>
> Cheers.
> Mike Cherim
> http://green-beast.com/
>
>
>
>
>
> ***
> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: [EMAIL PROTECTED]
> ***
>
>


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] Rounded Courners .... Your Take

[Mike at Green-Beast.com]

I can offer this simple method:
http://mikecherim.com/experiments/css_smart_corners.php

I prefer spans over divs because divs do have semantic value as divisions 
whereas span are like puffs of air in that they serve as nothing more than a 
hook for styles, etc. I'd rather offer a span to accept the background than 
a full div.

That's my take on it anyway.

Cheers.
Mike Cherim
http://green-beast.com/





***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

RE: [WSG] Rounded Courners .... Your Take

[James Leslie]

 
For fixed width boxes I use 3 images - 1 for the top, 1 for the middle
and 1 for the bottom

For totally fluid boxes I try to use tags inside the container (headings
and paragraph tags can be useful here depending on content) and then add
divs as appropriate

James


> James Jeffery wrote:
>> What methods do you find best when creating rounded corners and which

>> methods are the most supported?
>>
>> I have been using span tags and absolute positioning. I have also 
>> recently started to use the sliding doors method because you can 
>> achive nice rounded boxes with some nice effects, even better if you 
>> use PNG's.
>>
>> Using the span method i did find a bug in IE 6, the 2 corner span's 
>> wouldn't sit flush with the bottom of the containing div, although it

>> displayed fine in every other browser i tested it on and they could 
>> be resized fine. It was odd though, because IE 5.x display them 
>> perfect, was just IE 6.
>>
>> Lets have your beloved methods then guys.
>>
>> James




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] Rounded Courners .... Your Take

[Dave Woods]

I'd usually use something like this as it's much easier to reuse for
different purposes and different sizes.

http://www.dave-woods.co.uk/wp-content/uploads/2007/10/rounded-corners-demo.html

It requires four extra div's and four images but I'd prefer it to the
JavaScript approach and works consistently to my knowledge in IE6,
IE7, Firefox, Safari and Opera.

Obviously if you're dealing with images or gradients behind the box
then you may have to go for a more complicated approach but for a
simple box then this method usually serves its purpose well.

With CSS3 you should be able to create rounded corners by just using
CSS but we're obviously some time away from being able to use it as
currently only Firefox and Safari have any support and even then it's
inconsistent when dealing with irregular curves.

Hope that helps.


On 31/10/2007, Bruce <[EMAIL PROTECTED]> wrote:
> Personally, and perhaps I am too motivated towards simplicity, I use three
> images.
> One across the top, one in middle, one for bottom.
>
> I find JavaScript annoying as I watch the corners filling in after page
> loads.
> Four to six images using css are better, but still problematical for
> alignment,loading,  and extra css.
>
> Bruce
> bkdesign
>
>
> > James Jeffery wrote:
> >> What methods do you find best when creating rounded corners and
> >> which methods are the most supported?
> >>
> >> I have been using span tags and absolute positioning. I have also
> >> recently started to use the sliding doors method because you can
> >> achive nice rounded boxes with some nice effects, even better if
> >> you use PNG's.
> >>
> >> Using the span method i did find a bug in IE 6, the 2 corner span's
> >> wouldn't sit flush with the bottom of the containing div, although it
> >> displayed fine in every other browser i tested it on and they could
> >> be resized fine. It was odd though, because IE 5.x display them
> >> perfect, was just IE 6.
> >>
> >> Lets have your beloved methods then guys.
> >>
> >> James
>
>
>
>
> ***
> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: [EMAIL PROTECTED]
> ***
>
>


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] Rounded Courners .... Your Take

[Bruce]

Personally, and perhaps I am too motivated towards simplicity, I use three 
images.

One across the top, one in middle, one for bottom.

I find JavaScript annoying as I watch the corners filling in after page 
loads.
Four to six images using css are better, but still problematical for 
alignment,loading,  and extra css.


Bruce
bkdesign



James Jeffery wrote:

What methods do you find best when creating rounded corners and
which methods are the most supported?

I have been using span tags and absolute positioning. I have also
recently started to use the sliding doors method because you can
achive nice rounded boxes with some nice effects, even better if
you use PNG's.

Using the span method i did find a bug in IE 6, the 2 corner span's
wouldn't sit flush with the bottom of the containing div, although it
displayed fine in every other browser i tested it on and they could
be resized fine. It was odd though, because IE 5.x display them
perfect, was just IE 6.

Lets have your beloved methods then guys.

James





***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] Rounded Courners .... Your Take

[James Ellis]

Hi Paul

Too true, I'll figure out some sort of caching - probably a combo of server 
and client - at the moment it is just me hitting the script during testing.

Thanks
James


On Wed, 31 Oct 2007 11:07:45 am Paul Bennett wrote:
> > Now instead of opening up inkscape it's just a call to a PHP script like:
> > background-image: url(corner.png.php?fgc=ccc&bs=1&bgc=000&bc=fff&r=90);
>
> So for everytime the css file is called, your script has to create an
> image? Has this impacted on your sites / servers performance any?
>
> Have you considered a caching solution - where the new image is generated
> then stored static until it needs to change again?
>
> Also, there's always things like this using the Dom & JavaScript:
> http://www.456bereastreet.com/archive/200505/transparent_custom_corners_and
>_borders/
>
>
> ***
> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: [EMAIL PROTECTED]
> ***




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] Rounded Courners .... Your Take

[Jixor - Stephen I]

That reminds me you can see what I was playing around with a couple of 
years ago on my cruddy broken web site.

http://jixor.com/Stuff/Web/Panes

James Jeffery wrote:

What methods do you find best when creating rounded corners and
which methods are the most supported?

I have been using span tags and absolute positioning. I have also
recently started to use the sliding doors method because you can
achive nice rounded boxes with some nice effects, even better if
you use PNG's.

Using the span method i did find a bug in IE 6, the 2 corner span's
wouldn't sit flush with the bottom of the containing div, although it
displayed fine in every other browser i tested it on and they could
be resized fine. It was odd though, because IE 5.x display them
perfect, was just IE 6.

Lets have your beloved methods then guys.

James


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***


  




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] Rounded Courners .... Your Take

[Jixor - Stephen I]

With the sliding doors style if your boxes have standard content such as 
a header followed by a paragraph then you can avoid adding any 
additional markup too.


James Jeffery wrote:

What methods do you find best when creating rounded corners and
which methods are the most supported?

I have been using span tags and absolute positioning. I have also
recently started to use the sliding doors method because you can
achive nice rounded boxes with some nice effects, even better if
you use PNG's.

Using the span method i did find a bug in IE 6, the 2 corner span's
wouldn't sit flush with the bottom of the containing div, although it
displayed fine in every other browser i tested it on and they could
be resized fine. It was odd though, because IE 5.x display them
perfect, was just IE 6.

Lets have your beloved methods then guys.

James


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***


  




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

RE: [WSG] Rounded Courners .... Your Take

[michael.brockington]

Strictly speaking, it is the browsers that are at fault - Safari/WebKit
supports multiple background images, and FireFox/Camino et al. all
support rounded corners via border-radius. In both cases this is
(basically) according to the CSS spec.

In many cases, I use border-radius: this is purely eye-candy, and I
really don't mind it looking better in FireFox than it does on IE.

Mike


>-Original Message-
>From: [EMAIL PROTECTED] 
>[mailto:[EMAIL PROTECTED] On Behalf Of James Jeffery
>Sent: Tuesday, October 30, 2007 11:59 PM
>To: wsg@webstandardsgroup.org
>Subject: Re: [WSG] Rounded Courners  Your Take
>
>Nothing wrong with it to my knowledge. I find semantic wise, 
>both are invalid, this is no fault of the designer, its a 
>limitation to do with CSS.
>


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] Rounded Courners .... Your Take

[Christian Snodgrass]

I also prefer using the  tags. I think it's as semantically valid 
as , which neither of them really are.


The idea for a PHP round corners script is a very interesting one as 
well. I'd be interested in seeing that script.


--

Christian Snodgrass
Azure Ronin Web Design
http://www.arwebdesign.net/
Phone: 859.816.7955



***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

RE: [WSG] Rounded Courners .... Your Take

[Paul Bennett]

> Now instead of opening up inkscape it's just a call to a PHP script like:
> background-image: url(corner.png.php?fgc=ccc&bs=1&bgc=000&bc=fff&r=90);

So for everytime the css file is called, your script has to create an image? 
Has this impacted on your sites / servers performance any?

Have you considered a caching solution - where the new image is generated then 
stored static until it needs to change again?

Also, there's always things like this using the Dom & JavaScript:
http://www.456bereastreet.com/archive/200505/transparent_custom_corners_and_borders/
 


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] Rounded Courners .... Your Take

[James Jeffery]

Nothing wrong with it to my knowledge. I find semantic wise, both are
invalid, this is no fault of the designer, its a limitation to do with CSS.

I have never really used the div method.

On Oct 30, 2007 11:39 PM, akella <[EMAIL PROTECTED]> wrote:
> May be i'm missing something, but what's wrong with wrapping divs?
> Much more stable approach...
> smth like this:
>
> 
> [content]
> 
> .wr1{background:url(corner-top-left.png)}
> ...
>
> On 10/30/07, James Jeffery <[EMAIL PROTECTED]> wrote:
> > You can try it out for yourself by changing the images to a solid color
> > and change the font-size in the body to 1em and test in IE5.5.
> >
> > See what you come up with.
> >
> > On Oct 30, 2007 4:46 PM, James Jeffery <[EMAIL PROTECTED]> wrote:
>
> > > I was having a slight issue using  tags, the problem with IE5.x.
> > > I fixed it and
> > > it now displays perfect. I had a problem that when text was made larger 
> > > in IE5.x
> > > the 2 corner images to the right would shift one pixel to the left and
> > > it displayed messy.
> > >
> > > If i add font-size: 0.9em to the body it fixes it, if i add font-size:
> > > 1em the problem is
> > > still there. Not sure why this happens, but would love to know. It is
> > > fixed by the way,
> > > im just curious:
> > >
> > > 
> > >
> > >  > > "http://w3.org/TR/html4/strict.dtd";>
> > > 
> > > 
> > >
> > > Rounded Corners Test
> > >
> > > 
> > >
> > > html * {margin:0; padding:0;}
> > >
> > > body {padding: 1em; font-size: .9em}
> > >
> > > #news {
> > > position: relative;
> > > background: black;
> > > width: 15em;
> > > color: white;
> > > padding: 1em;}
> > >
> > > #news span {
> > > width: 9px; height: 9px;
> > > position: absolute;}
> > > #topLeft {
> > > background: url("images/topLeft.gif") top left 
> > > no-repeat;
> > > left: 0; top: 0;}
> > > #topRight {
> > > background: url("images/topRight.gif") top right 
> > > no-repeat;
> > > right: 0; top: 0;}
> > > #bottomLeft {
> > > background: url("images/bottomLeft.gif") bottom 
> > > left no-repeat;
> > > left: 0; bottom: 0;}
> > > #bottomRight {
> > > background: url("images/bottomRight.gif") bottom 
> > > right no-repeat;
> > > right: 0; bottom: 0;}
> > >
> > > 
> > >
> > > 
> > >
> > > 
> > >
> > > 
> > >
> > > 
> > > 
> > >
> > > This is an example of a rounded corners Div that 
> > > allows for expansion
> > > This is an example of a rounded corners Div that 
> > > allows for expansion
> > > This is an example of a rounded corners Div that 
> > > allows for expansion
> > > This is an example of a rounded corners Div that 
> > > allows for expansion
> > >
> > > 
> > > 
> > >
> > > 
> > >
> > > 
> > > 
> > >
> > >
> > > On Oct 30, 2007 4:18 PM, Mohamed Jama <[EMAIL PROTECTED]> wrote:
> > > > Depending on the background, if the corners blue and the background is
> > > > white then there is no problem a normal gif would do best but if the
> > > > background is gradient or patterned then maybe in Photoshop when saving
> > > > for web make sure its gif and set the matte option to a color close
> > > > enough to the background color.
> > > >
> > > > Or I just use PNG with absolute transparency, I know IE6 doesn't support
> > > > it but with the PNGFIX JavaScript it should work just fine.
> >

Re: [WSG] Rounded Courners .... Your Take

[akella]

May be i'm missing something, but what's wrong with wrapping divs?
Much more stable approach...
smth like this:


[content]

.wr1{background:url(corner-top-left.png)}
...

On 10/30/07, James Jeffery <[EMAIL PROTECTED]> wrote:
> You can try it out for yourself by changing the images to a solid color
> and change the font-size in the body to 1em and test in IE5.5.
>
> See what you come up with.
>
> On Oct 30, 2007 4:46 PM, James Jeffery <[EMAIL PROTECTED]> wrote:
> > I was having a slight issue using  tags, the problem with IE5.x.
> > I fixed it and
> > it now displays perfect. I had a problem that when text was made larger in 
> > IE5.x
> > the 2 corner images to the right would shift one pixel to the left and
> > it displayed messy.
> >
> > If i add font-size: 0.9em to the body it fixes it, if i add font-size:
> > 1em the problem is
> > still there. Not sure why this happens, but would love to know. It is
> > fixed by the way,
> > im just curious:
> >
> > 
> >
> >  > "http://w3.org/TR/html4/strict.dtd";>
> > 
> > 
> >
> > Rounded Corners Test
> >
> > 
> >
> > html * {margin:0; padding:0;}
> >
> > body {padding: 1em; font-size: .9em}
> >
> > #news {
> > position: relative;
> > background: black;
> > width: 15em;
> > color: white;
> > padding: 1em;}
> >
> > #news span {
> > width: 9px; height: 9px;
> > position: absolute;}
> > #topLeft {
> > background: url("images/topLeft.gif") top left 
> > no-repeat;
> > left: 0; top: 0;}
> > #topRight {
> > background: url("images/topRight.gif") top right 
> > no-repeat;
> > right: 0; top: 0;}
> > #bottomLeft {
> > background: url("images/bottomLeft.gif") bottom 
> > left no-repeat;
> > left: 0; bottom: 0;}
> > #bottomRight {
> > background: url("images/bottomRight.gif") bottom 
> > right no-repeat;
> > right: 0; bottom: 0;}
> >
> > 
> >
> > 
> >
> > 
> >
> > 
> >
> > 
> > 
> >
> > This is an example of a rounded corners Div that allows 
> > for expansion
> > This is an example of a rounded corners Div that allows 
> > for expansion
> > This is an example of a rounded corners Div that allows 
> > for expansion
> > This is an example of a rounded corners Div that allows 
> > for expansion
> >
> > 
> > 
> >
> > 
> >
> > 
> > 
> >
> >
> > On Oct 30, 2007 4:18 PM, Mohamed Jama <[EMAIL PROTECTED]> wrote:
> > > Depending on the background, if the corners blue and the background is
> > > white then there is no problem a normal gif would do best but if the
> > > background is gradient or patterned then maybe in Photoshop when saving
> > > for web make sure its gif and set the matte option to a color close
> > > enough to the background color.
> > >
> > > Or I just use PNG with absolute transparency, I know IE6 doesn't support
> > > it but with the PNGFIX JavaScript it should work just fine.
> > >
> > > M. Jama
> > >
> > > big:interactive
> > > 91 Princedale Road
> > > Holland Park
> > > London W11 4NS
> > > Email: [EMAIL PROTECTED]
> > > Direct: +44 (0)20 7313 2262
> > > www.biggroup.co.uk
> > >
> > >
> > > -Original Message-
> > > From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
> > > On Behalf Of James Jeffery
> > > Sent: 30 October 2007 15:53
> > > To: wsg@webstandardsgroup.org
> > > Subject: [WSG] Rounded Courners  Your Take
> > >
> > > What methods do you find best when creating rounded corners and
> > > which methods are the most supported?
> > >
> > &

Re: [WSG] Rounded Courners .... Your Take

[James Ellis]

Hi James

I got so sick of doing rounded corners and having to open a graphics program 
to change them (Hey, I'm a developer) when the design changed that I wrote 
PHP script using Imagick2.0 that draws the quadrants using the correct 
foreground colour, background color (or transparent), border size, rotation 
and border width.

Now instead of opening up inkscape it's just a call to a PHP script like:

background-image: url(corner.png.php?fgc=ccc&bs=1&bgc=000&bc=fff&r=90);

which is a grey corner with a 1px white border and black background.

Of course if the background is transparent it breaks badly in IE6, but there 
are workarounds for that.

Then I use absolute positioning within a relative position box to place the 
corners in the right places.

I'm so Web 0.9rc2 that I don't have a blog - If I get my act together I'll 
post a script to one somewhere.

Interestingly enough, Opera 9.5 and hopefully Firefox 3 will support SVG 
backgrounds which means you can have resizable background images that change 
size as the containing box changes size. And theSVG is just XML so it can 
easily be generated programmatically.

http://my.opera.com/Fyrd/blog/2007/09/07/svg-multiple-images-and-rounded-corners
http://dev.opera.com/articles/view/new-development-techniques-using-opera-k/

Cheers
James


On Wed, 31 Oct 2007 02:53:03 am James Jeffery wrote:
> What methods do you find best when creating rounded corners and
> which methods are the most supported?
>
> I have been using span tags and absolute positioning. I have also
> recently started to use the sliding doors method because you can
> achive nice rounded boxes with some nice effects, even better if
> you use PNG's.
>
> Using the span method i did find a bug in IE 6, the 2 corner span's
> wouldn't sit flush with the bottom of the containing div, although it
> displayed fine in every other browser i tested it on and they could
> be resized fine. It was odd though, because IE 5.x display them
> perfect, was just IE 6.
>
> Lets have your beloved methods then guys.
>
> James
>
>
> ***
> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: [EMAIL PROTECTED]
> ***




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

Re: [WSG] Rounded Courners .... Your Take

[James Jeffery]

You can try it out for yourself by changing the images to a solid color
and change the font-size in the body to 1em and test in IE5.5.

See what you come up with.

On Oct 30, 2007 4:46 PM, James Jeffery <[EMAIL PROTECTED]> wrote:
> I was having a slight issue using  tags, the problem with IE5.x.
> I fixed it and
> it now displays perfect. I had a problem that when text was made larger in 
> IE5.x
> the 2 corner images to the right would shift one pixel to the left and
> it displayed messy.
>
> If i add font-size: 0.9em to the body it fixes it, if i add font-size:
> 1em the problem is
> still there. Not sure why this happens, but would love to know. It is
> fixed by the way,
> im just curious:
>
> 
>
>  "http://w3.org/TR/html4/strict.dtd";>
> 
> 
>
> Rounded Corners Test
>
> 
>
> html * {margin:0; padding:0;}
>
> body {padding: 1em; font-size: .9em}
>
> #news {
> position: relative;
> background: black;
> width: 15em;
> color: white;
> padding: 1em;}
>
> #news span {
> width: 9px; height: 9px;
> position: absolute;}
> #topLeft {
> background: url("images/topLeft.gif") top left 
> no-repeat;
> left: 0; top: 0;}
> #topRight {
> background: url("images/topRight.gif") top right 
> no-repeat;
> right: 0; top: 0;}
> #bottomLeft {
> background: url("images/bottomLeft.gif") bottom left 
> no-repeat;
> left: 0; bottom: 0;}
> #bottomRight {
> background: url("images/bottomRight.gif") bottom 
> right no-repeat;
> right: 0; bottom: 0;}
>
> 
>
> 
>
> 
>
> 
>
> 
> 
>
> This is an example of a rounded corners Div that allows 
> for expansion
> This is an example of a rounded corners Div that allows 
> for expansion
> This is an example of a rounded corners Div that allows 
> for expansion
> This is an example of a rounded corners Div that allows 
> for expansion
>
> 
> 
>
> 
>
> 
> 
>
>
> On Oct 30, 2007 4:18 PM, Mohamed Jama <[EMAIL PROTECTED]> wrote:
> > Depending on the background, if the corners blue and the background is
> > white then there is no problem a normal gif would do best but if the
> > background is gradient or patterned then maybe in Photoshop when saving
> > for web make sure its gif and set the matte option to a color close
> > enough to the background color.
> >
> > Or I just use PNG with absolute transparency, I know IE6 doesn't support
> > it but with the PNGFIX JavaScript it should work just fine.
> >
> > M. Jama
> >
> > big:interactive
> > 91 Princedale Road
> > Holland Park
> > London W11 4NS
> > Email: [EMAIL PROTECTED]
> > Direct: +44 (0)20 7313 2262
> > www.biggroup.co.uk
> >
> >
> > -Original Message-
> > From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
> > On Behalf Of James Jeffery
> > Sent: 30 October 2007 15:53
> > To: wsg@webstandardsgroup.org
> > Subject: [WSG] Rounded Courners  Your Take
> >
> > What methods do you find best when creating rounded corners and
> > which methods are the most supported?
> >
> > I have been using span tags and absolute positioning. I have also
> > recently started to use the sliding doors method because you can
> > achive nice rounded boxes with some nice effects, even better if
> > you use PNG's.
> >
> > Using the span method i did find a bug in IE 6, the 2 corner span's
> > wouldn't sit flush with the bottom of the containing div, although it
> > displayed fine in every other browser i tested it on and they could
> > be resized fine. It was odd though, because IE 5.x display them
> > perfect, was just IE 6.
> >
> > Lets have your beloved methods then guys.
> >
> > James
> >
> >
> > ***
> > List Guidelines: http://webstandardsgroup.org/mail/guidelines.c

Re: [WSG] Rounded Courners .... Your Take

[James Jeffery]

I was having a slight issue using  tags, the problem with IE5.x.
I fixed it and
it now displays perfect. I had a problem that when text was made larger in IE5.x
the 2 corner images to the right would shift one pixel to the left and
it displayed messy.

If i add font-size: 0.9em to the body it fixes it, if i add font-size:
1em the problem is
still there. Not sure why this happens, but would love to know. It is
fixed by the way,
im just curious:



http://w3.org/TR/html4/strict.dtd";>



Rounded Corners Test



html * {margin:0; padding:0;}

body {padding: 1em; font-size: .9em}

#news {
position: relative;
background: black;
width: 15em;
color: white;
padding: 1em;}

#news span {
width: 9px; height: 9px;
position: absolute;}
#topLeft {
background: url("images/topLeft.gif") top left 
no-repeat;
left: 0; top: 0;}
#topRight {
background: url("images/topRight.gif") top right 
no-repeat;
right: 0; top: 0;}
#bottomLeft {
background: url("images/bottomLeft.gif") bottom left 
no-repeat;
left: 0; bottom: 0;}
#bottomRight {
background: url("images/bottomRight.gif") bottom right 
no-repeat;
right: 0; bottom: 0;}












This is an example of a rounded corners Div that allows for 
expansion
This is an example of a rounded corners Div that allows for 
expansion
This is an example of a rounded corners Div that allows for 
expansion
This is an example of a rounded corners Div that allows for 
expansion









On Oct 30, 2007 4:18 PM, Mohamed Jama <[EMAIL PROTECTED]> wrote:
> Depending on the background, if the corners blue and the background is
> white then there is no problem a normal gif would do best but if the
> background is gradient or patterned then maybe in Photoshop when saving
> for web make sure its gif and set the matte option to a color close
> enough to the background color.
>
> Or I just use PNG with absolute transparency, I know IE6 doesn't support
> it but with the PNGFIX JavaScript it should work just fine.
>
> M. Jama
>
> big:interactive
> 91 Princedale Road
> Holland Park
> London W11 4NS
> Email: [EMAIL PROTECTED]
> Direct: +44 (0)20 7313 2262
> www.biggroup.co.uk
>
>
> -Original Message-
> From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
> On Behalf Of James Jeffery
> Sent: 30 October 2007 15:53
> To: wsg@webstandardsgroup.org
> Subject: [WSG] Rounded Courners  Your Take
>
> What methods do you find best when creating rounded corners and
> which methods are the most supported?
>
> I have been using span tags and absolute positioning. I have also
> recently started to use the sliding doors method because you can
> achive nice rounded boxes with some nice effects, even better if
> you use PNG's.
>
> Using the span method i did find a bug in IE 6, the 2 corner span's
> wouldn't sit flush with the bottom of the containing div, although it
> displayed fine in every other browser i tested it on and they could
> be resized fine. It was odd though, because IE 5.x display them
> perfect, was just IE 6.
>
> Lets have your beloved methods then guys.
>
> James
>
>
> ***
> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: [EMAIL PROTECTED]
> ***
>
>
>
>
> ***
> List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
> Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
> Help: [EMAIL PROTECTED]
> ***
>
>


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

RE: [WSG] Rounded Courners .... Your Take

[Mohamed Jama]

Depending on the background, if the corners blue and the background is
white then there is no problem a normal gif would do best but if the
background is gradient or patterned then maybe in Photoshop when saving
for web make sure its gif and set the matte option to a color close
enough to the background color.

Or I just use PNG with absolute transparency, I know IE6 doesn't support
it but with the PNGFIX JavaScript it should work just fine.

M. Jama

big:interactive
91 Princedale Road
Holland Park
London W11 4NS
Email: [EMAIL PROTECTED]
Direct: +44 (0)20 7313 2262
www.biggroup.co.uk

-Original Message-
From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED]
On Behalf Of James Jeffery
Sent: 30 October 2007 15:53
To: wsg@webstandardsgroup.org
Subject: [WSG] Rounded Courners  Your Take

What methods do you find best when creating rounded corners and
which methods are the most supported?

I have been using span tags and absolute positioning. I have also
recently started to use the sliding doors method because you can
achive nice rounded boxes with some nice effects, even better if
you use PNG's.

Using the span method i did find a bug in IE 6, the 2 corner span's
wouldn't sit flush with the bottom of the containing div, although it
displayed fine in every other browser i tested it on and they could
be resized fine. It was odd though, because IE 5.x display them
perfect, was just IE 6.

Lets have your beloved methods then guys.

James


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***




***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***

[WSG] Rounded Courners .... Your Take

[James Jeffery]

What methods do you find best when creating rounded corners and
which methods are the most supported?

I have been using span tags and absolute positioning. I have also
recently started to use the sliding doors method because you can
achive nice rounded boxes with some nice effects, even better if
you use PNG's.

Using the span method i did find a bug in IE 6, the 2 corner span's
wouldn't sit flush with the bottom of the containing div, although it
displayed fine in every other browser i tested it on and they could
be resized fine. It was odd though, because IE 5.x display them
perfect, was just IE 6.

Lets have your beloved methods then guys.

James


***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***