RE: [WSG] Rounded Courners .... Your Take
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
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
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
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=cccbs=1bgc=000bc=fffr=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
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
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
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
Hi Mike, I was considering using span's instead of div's for my example but was a little torn between the two as I'd usually use span's for their inline purpose in a block of text or for styling something within an inline element (when obviously a div 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 div :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 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
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
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 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
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] ***
Re: [WSG] Rounded Courners .... Your Take
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 span 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:
!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01//EN
http://w3.org/TR/html4/strict.dtd;
html lang=en-GB
head
titleRounded Corners Test/title
style type=text/css media=all
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;}
/style
/head
body
div id=news
span id=topLeft/span
span id=topRight/span
pThis is an example of a rounded corners Div that allows
for expansion/p
pThis is an example of a rounded corners Div that allows
for expansion/p
pThis is an example of a rounded corners Div that allows
for expansion/p
pThis is an example of a rounded corners Div that allows
for expansion/p
span id=bottomLeft/span
span id=bottomRight/span
/div
/body
/html
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:
Re: [WSG] Rounded Courners .... Your Take
I was having a slight issue using span 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:
!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01//EN
http://w3.org/TR/html4/strict.dtd;
html lang=en-GB
head
titleRounded Corners Test/title
style type=text/css media=all
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;}
/style
/head
body
div id=news
span id=topLeft/span
span id=topRight/span
pThis is an example of a rounded corners Div that allows for
expansion/p
pThis is an example of a rounded corners Div that allows for
expansion/p
pThis is an example of a rounded corners Div that allows for
expansion/p
pThis is an example of a rounded corners Div that allows for
expansion/p
span id=bottomLeft/span
span id=bottomRight/span
/div
/body
/html
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
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=cccbs=1bgc=000bc=fffr=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
May be i'm missing something, but what's wrong with wrapping divs?
Much more stable approach...
smth like this:
div class=wr1div class=wr2div class=wr3div class=wr4
[content]
/div/div/div/div
.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 span 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:
!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01//EN
http://w3.org/TR/html4/strict.dtd;
html lang=en-GB
head
titleRounded Corners Test/title
style type=text/css media=all
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;}
/style
/head
body
div id=news
span id=topLeft/span
span id=topRight/span
pThis is an example of a rounded corners Div that allows
for expansion/p
pThis is an example of a rounded corners Div that allows
for expansion/p
pThis is an example of a rounded corners Div that allows
for expansion/p
pThis is an example of a rounded corners Div that allows
for expansion/p
span id=bottomLeft/span
span id=bottomRight/span
/div
/body
/html
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]
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.
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:
div class=wr1div class=wr2div class=wr3div class=wr4
[content]
/div/div/div/div
.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 span 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:
!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01//EN
http://w3.org/TR/html4/strict.dtd;
html lang=en-GB
head
titleRounded Corners Test/title
style type=text/css media=all
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;}
/style
/head
body
div id=news
span id=topLeft/span
span id=topRight/span
pThis is an example of a rounded corners Div that
allows for expansion/p
pThis is an example of a rounded corners Div that
allows for expansion/p
pThis is an example of a rounded corners Div that
allows for expansion/p
pThis is an example of a rounded corners Div that
allows for expansion/p
span id=bottomLeft/span
span id=bottomRight/span
/div
/body
/html
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
RE: [WSG] Rounded Courners .... Your Take
Now instead of opening up inkscape it's just a call to a PHP script like: background-image: url(corner.png.php?fgc=cccbs=1bgc=000bc=fffr=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
I also prefer using the div tags. I think it's as semantically valid as span, 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] ***
