[css-d] Rounded corners do not apply to child elements
Hello!
I encountered that rounded corners do not seem to apply to child elements:
.roundCorners {
width:500px;
height:200px;
margin:1em auto;
background:yellow;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
}
.roundCorners div {
width:200px;
height:200px;
float:right;
background:red;
}
div class=roundCorners
divHello/div
/div
In this example, the right corners of the red child element are not
rounded in recent versions of Firefox, Opera, Chrome, and IE9.
Is this the expected behavior? I did not find anything on the behavior
of child elements in the spec:
http://www.w3.org/TR/2011/CR-css3-background-20110215/#the-border-radius
I can't imagine that all current implementations are buggy, but from an
author's POV this behavior does not seem useful to me. If I apply
rounded corners to a container element, I would not want to re-apply
them to every child that might be placed in a corner. Is there a decent
solution to this? Or do you think I should raise this in the www-style list?
Thanks for your comments!
Markus
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rounded corners do not apply to child elements
2012-02-09 11:54, Markus Ernst wrote: I encountered that rounded corners do not seem to apply to child elements: Right. Is this the expected behavior? I did not find anything on the behavior of child elements in the spec: http://www.w3.org/TR/2011/CR-css3-background-20110215/#the-border-radius It is the expected behavior. Inherited: no means that setting border-radius on an element affects that element's border only. You would need to set it explicitly on any element for which it is desired. Yucca __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rounded corners do not apply to child elements
Am 09.02.2012 11:05 schrieb Jukka K. Korpela: 2012-02-09 11:54, Markus Ernst wrote: I encountered that rounded corners do not seem to apply to child elements: Right. Is this the expected behavior? I did not find anything on the behavior of child elements in the spec: http://www.w3.org/TR/2011/CR-css3-background-20110215/#the-border-radius It is the expected behavior. Inherited: no means that setting border-radius on an element affects that element's border only. You would need to set it explicitly on any element for which it is desired. Thanks a lot for your quick answer. There seems to be a special case of inheritation here to me. If a property is inherited, it would mean that child elements get the same property, which is not desired in the case of rounded corners (as any border). In my example, the container element makes a box, which contains the inner element: div class=roundCorners divHello/div /div Now, if there is a border applied to the container element, the inner element is not expected to inherit the border, but it is expected to be placed inside the border, rather than covering it. In the case of rounded corners, I would accordingly expect the inner element to be rounded at the edges of the outer element, rather than covering the rounded corners (and even covering a possible border of the container element at the corners). Do you think it would make sense to raise this in www-style? __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rounded corners do not apply to child elements
Am 09.02.2012 11:38 schrieb Desi Matlock: Do you think it would make sense to raise this in www-style? Definitely not, what if you want another div inside that is only a few pixels smaller, with another set of similar rounded corners? Would you want to force that div to occur within a forced padding caused by a rounded corner on an outside div? I don't understand this - rounded corners do not seem to cause a padding, they just seem to affect the rendering of background and image contents, as far as I encountered it until now. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rounded corners do not apply to child elements
On Feb 9, 2012, at 6:54 PM, Markus Ernst wrote:
I encountered that rounded corners do not seem to apply to child elements:
[…]
In this example, the right corners of the red child element are not rounded
in recent versions of Firefox, Opera, Chrome, and IE9.
Is this the expected behavior? I did not find anything on the behavior of
child elements in the spec:
http://www.w3.org/TR/2011/CR-css3-background-20110215/#the-border-radius
Yucca already gave you the core of the answer.
In addition: border-radius does not clip child elements.
If you want clipping to happen, try
.roundCorners { overflow: hidden; }
or force the child box to inherit the border-radius
Now, if there is a border applied to the container element, the inner element
is not expected to inherit the border, but it is expected to be placed inside
the border, rather than covering it.
In the case of rounded corners, I would accordingly expect the inner element
to be rounded at the edges of the outer element, rather than covering the
rounded corners (and even covering a possible border of the container element
at the corners).
But the child is not offset by corner (border-radius is a bit a misnomer, it
should actually be 'corner-radius'). With 'border', the child element is moved
(it cannot cover the border unless forced to do so).
Philippe
--
Philippe Wittenbergh
http://l-c-n.com/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] rounded corners problem
The client didn't care about more/less HTTP requests for 4 tiny tiny images that will appear everywhere (and get cached). The nested containers just plain worked better in ie6, so I went with that. Thanks to all who put in their 2 cents. I appreciated the valuable feedback. Perhaps I'll be able to refine this in further iterations... Rory Rather than refining the corners in further iterations you might consider a more avant garde approach and just ditch the corners be they round or square altogether... ;-) Best, ~d Well, that would certainly make my life easier, but the client doesn't want to change the design. I wish I could tell major corporations to change their designs for my convenience, but that day has not arrived yet! ; ) R __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] rounded corners problem
On Apr 21, 2010, at 6:20 PM, Rory Bernstein wrote: So, same page: http://www.rorybernstein.com/roundcorners/ New problem: Layout is all messed up in IE7. Have not looked at 6 yet, but expect that is messed up too. Help? Well, I solved it. (With significant help.) It was actually IE6 that it was messed up in (not IE7, so I rewrote the whole thing. I used 4 nested divs, one inside the other, each one has one of the corner images, and inside it all is the content. Here's the result: http://www.rorybernstein.com/roundcorners/index_nested.html I really, really hate IE6 and I hope I can completely stop supporting it soon. Thanks, Rory __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] rounded corners problem
http://www.rorybernstein.com/roundcorners/ New problem: Layout is all messed up in IE7. Have not looked at 6 yet, but expect that is messed up too. Help? Well, I solved it. (With significant help.) It was actually IE6 that it was messed up in (not IE7, so I rewrote the whole thing. I used 4 nested divs, one inside the other, each one has one of the corner images, and inside it all is the content. Here's the result: http://www.rorybernstein.com/roundcorners/index_nested.html fwiw, you are nesting six containers using 4 different images for the corners. Using the method suggested in this thread you could have done that with less markup and less HTTP requests... -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] rounded corners problem
Well, I solved it. (With significant help.) It was actually IE6 that it was messed up in (not IE7, so I rewrote the whole thing. I used 4 nested divs, one inside the other, each one has one of the corner images, and inside it all is the content. Here's the result: http://www.rorybernstein.com/roundcorners/index_nested.html fwiw, you are nesting six containers using 4 different images for the corners. Using the method suggested in this thread you could have done that with less markup and less HTTP requests... -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz The client didn't care about more/less HTTP requests for 4 tiny tiny images that will appear everywhere (and get cached). The nested containers just plain worked better in ie6, so I went with that. Thanks to all who put in their 2 cents. I appreciated the valuable feedback. Perhaps I'll be able to refine this in further iterations... Rory __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] rounded corners problem
Rory Bernstein wrote: Well, I solved it. (With significant help.) It was actually IE6 that it was messed up in (not IE7, so I rewrote the whole thing. I used 4 nested divs, one inside the other, each one has one of the corner images, and inside it all is the content. Here's the result: http://www.rorybernstein.com/roundcorners/index_nested.html fwiw, you are nesting six containers using 4 different images for the corners. Using the method suggested in this thread you could have done that with less markup and less HTTP requests... -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz The client didn't care about more/less HTTP requests for 4 tiny tiny images that will appear everywhere (and get cached). The nested containers just plain worked better in ie6, so I went with that. Thanks to all who put in their 2 cents. I appreciated the valuable feedback. Perhaps I'll be able to refine this in further iterations... Rory Rather than refining the corners in further iterations you might consider a more avant garde approach and just ditch the corners be they round or square altogether... ;-) Best, ~d -- desktop http://chelseacreekstudio.com/ mobile http://chelseacreekstudio.mobi/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] rounded corners problem
Hi All, http://rorybernstein.com/roundcorners/ On this page, the light blue box that surrounds the horizontal grey graphic has rounded corners with the help of a little css. It's working great in a lot of browsers, but not in IE8. I have not been able to test it on IE7 or lower yet... In IE8, the light blue box with the rounded corners has an ugly dark border all the way around it. Can anyone tell me how to alter the CSS to get rid of this? I used this page as a guide to get the rounded corners working on all browsers: http://jonraasch.com/blog/css-rounded-corners-in-all-browsers In my CSS file (external), I totally do not understand what is going on with this line of code, which references an external file: behavior: url(border-radius.htc); ...but, I included it as per the instructions on the page about rounded corners. The external file is located in the same directory as the HTML file. If anyone can let me know if this is working in IE7 or IE6, that would be great too. Thanks! Rory -- Rory Bernstein : Web Developer y Bernstein : Web Developer r...@rorybernstein.com http://www.rorybernstein.com phone: 347-469-0414 __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] rounded corners problem
From: Rory Bernstein r...@rorykerber.com Hi All, http://rorybernstein.com/roundcorners/ On this page, the light blue box that surrounds the horizontal grey graphic has rounded corners with the help of a little css. It's working great in a lot of browsers, but not in IE8. I have not been able to test it on IE7 or lower yet... In IE8, the light blue box with the rounded corners has an ugly dark border all the way around it. Can anyone tell me how to alter the CSS to get rid of this? I used this page as a guide to get the rounded corners working on all browsers: http://jonraasch.com/blog/css-rounded-corners-in-all-browsers Hi Rory, If you do not understand JavaScript (what's in the HTC file) and Microsoft VML (Vector Markup Language, which was proposed to the W3C but not accepted) then stick to pure CSS border-radius in terms of progressive enhancement [1]. These rounded corners for IE hacks and tricks are dangerous to play with unless the situation is precisely controlled. The major flaws are: The secret container that carries the curves does not properly reflow. So if text is resized, or if the container is horizontally flexible, its contents will escape the box. If the hack is applied to an element whose visibility, size, or position is manipulated dynamically, the contents will escape the container or the container will remain where the actual content was before it was moved or re-positioned. Other so-called curved corner solutions, such as jQuery's are even worse as they add scores of DIVs (or other elements) that use transparent pixels to erase the square edges. The result is bloat and very ragged edges. IE9 supports border-radius so over the next several years, folks can use it - but in a progressively enhanced scenario only. The best solution if rounded corners are a client requirement is, and will continue to be for some time, CSS-assigned background images. -- Al Sparber - PVII http://www.projectseven.com Dreamweaver Menus | Galleries | Widgets http://www.projectseven.com/go/hgm The Ultimate Web 2.0 Carousel [1] http://en.wikipedia.org/wiki/Progressive_enhancement __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] rounded corners problem
On Apr 21, 2010, at 10:15 AM, Al Sparber wrote:
The best solution if rounded corners are a client requirement is, and will
continue to be for some time, CSS-assigned background
images.
--
Al Sparber - PVII
Thanks, Al. I've ditched all the CSS3 from the page, sticking to regular CSS
and background images. I now have 4 new divs, one for each corner image; each
one has a little background image for the corners. So, that's working, but I
wonder can anyone take a look at my revised code and tell me if there is an
even cleaner way to do this? I am sad that I have these 4, non-semantic divs in
there.
Revised page is still here:
http://rorybernstein.com/roundcorners/
Also, the bottom margin of 30px on the following div is not working, the div
sits right at the bottom of the browser. In my old version, it worked,
producing 30px of space under the main_container div.
#main_container {
position: relative;
top: 110px;
padding: 11px;
background: #DDEDF7;
width: 949px;
min-height: 775px;
margin: 0 0 30px 20px;
}
Any comments about my CSS code will be appreciated; this page has to work for
the full range of browsers/platforms. Thanks in advance,
Rory
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] rounded corners problem
Hi Rory, regular CSS and background images. I now have 4 new divs, one for each corner image; each one has a little background image for the corners. So, that's working, but I wonder can anyone take a look at my revised code and tell me if there is an even cleaner way to do this? I am sad that I have these 4, non-semantic divs in there. Revised page is still here: http://rorybernstein.com/roundcorners/ The four corner technique is great for flexible layouts, but since yours has a fixed width I think you could do this with just two nested containers. One contains the top image, the other the bottom image. Create a sprite that has both these images next to each other, that will reduce the HTTP requests from 4 to 1. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] rounded corners problem
On Apr 21, 2010, at 12:54 PM, Thierry Koblentz wrote: Hi Rory, regular CSS and background images. I now have 4 new divs, one for each corner image; each one has a little background image for the corners. So, that's working, but I wonder can anyone take a look at my revised code and tell me if there is an even cleaner way to do this? I am sad that I have these 4, non-semantic divs in there. Revised page is still here: http://rorybernstein.com/roundcorners/ The four corner technique is great for flexible layouts, but since yours has a fixed width I think you could do this with just two nested containers. One contains the top image, the other the bottom image. Create a sprite that has both these images next to each other, that will reduce the HTTP requests from 4 to 1. -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz Sprites... had not thought of that. Thanks. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] rounded corners problem
From: Thierry Koblentz n...@tjkdesign.com The four corner technique is great for flexible layouts, but since yours has a fixed width I think you could do this with just two nested containers. One contains the top image, the other the bottom image. Create a sprite that has both these images next to each other, that will reduce the HTTP requests from 4 to 1. Yes, for a fixed layout, a top, a bottom, and a y-tiling middle is all that's needed. I would use adjacent elements that are already there to carry the backgrounds. Should be doable without any additional markup. -- Al Sparber - PVII http://www.projectseven.com Dreamweaver Menus | Galleries | Widgets http://www.projectseven.com/go/hgm The Ultimate Web 2.0 Carousel __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] rounded corners problem
At 12:29 PM -0400 4/21/10, Rory Bernstein wrote: Thanks, Al. I've ditched all the CSS3 from the page, sticking to regular CSS and background images. I now have 4 new divs, one for each corner image; each one has a little background image for the corners. So, that's working, but I wonder can anyone take a look at my revised code and tell me if there is an even cleaner way to do this? I am sad that I have these 4, non-semantic divs in there. Revised page is still here: http://rorybernstein.com/roundcorners/ That's to what I've done here: http://sperling.com/examples/box/ However, the div's are arranged differently. Cheers, tedd -- --- http://sperling.com http://ancientstones.com http://earthstones.com __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] rounded corners problem
Revised page is still here: http://rorybernstein.com/roundcorners/ That's to what I've done here: http://sperling.com/examples/box/ However, the div's are arranged differently. I believe the OP is looking for a technique that would allow him to use less markup, not more. That page you link to has *ten* wrappers! -- Regards, Thierry www.tjkdesign.com | www.ez-css.org | @thierrykoblentz __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] rounded corners problem
So, same page: http://www.rorybernstein.com/roundcorners/ New problem: Layout is all messed up in IE7. Have not looked at 6 yet, but expect that is messed up too. Help? Thank you, Rory __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rounded Corners
At 1:01 PM -0800 12/2/09, Chick Newman wrote: I would like to know what people are doing to create rounded corners on div borders in non-mozilla , non-safari browsers. I thought I found a solution, which at least included opera, but I tried it and it isn't working there, either. Chick: There are lot's of ways to do rounded corners -- here's one: http://sperling.com/examples/box/ Cheers, tedd -- --- http://sperling.com http://ancientstones.com http://earthstones.com __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rounded Corners
For me, the simpliest way is using JQuery plugins. Curvycorners is one of them. Rodrigo On Thu, Dec 3, 2009 at 12:58 PM, tedd tedd.sperl...@gmail.com wrote: At 1:01 PM -0800 12/2/09, Chick Newman wrote: I would like to know what people are doing to create rounded corners on div borders in non-mozilla , non-safari browsers. I thought I found a solution, which at least included opera, but I tried it and it isn't working there, either. Chick: There are lot's of ways to do rounded corners -- here's one: http://sperling.com/examples/box/ Cheers, tedd -- --- http://sperling.com http://ancientstones.com http://earthstones.com __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rounded Corners
Georg is right about having to wait for major browsers to catch up. You may also wish to take a look at: http://code.google.com/p/curved-corner/ It does not work in Opera (not even 10.20 alpha), but in all the other browsers I have tested on various platforms. On Wed, Dec 2, 2009 at 2:01 PM, Chick Newman ch...@newmanveterinary.com wrote: I would like to know what people are doing to create rounded corners on div borders in non-mozilla , non-safari browsers. I thought I found a solution, which at least included opera, but I tried it and it isn't working there, either. Thanks, Chick __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rounded Corners
On Thu, 2009-12-03 at 13:24 -0300, Milano wrote: For me, the simpliest way is using JQuery plugins. Curvycorners is one of them. Curvycorners (http://www.curvycorners.net ) does work quite well, but it's not a jQuery plugin. In fact, it causes problems with some jQuery animations. There is a very effective jQuery corner plugin, though: http://www.malsup.com/jquery/corner/ Naturally, this requires JavaScript support to work. Rodrigo On Thu, Dec 3, 2009 at 12:58 PM, tedd tedd.sperl...@gmail.com wrote: At 1:01 PM -0800 12/2/09, Chick Newman wrote: I would like to know what people are doing to create rounded corners on div borders in non-mozilla , non-safari browsers. I thought I found a solution, which at least included opera, but I tried it and it isn't working there, either. Chick: There are lot's of ways to do rounded corners -- here's one: http://sperling.com/examples/box/ Cheers, tedd -- --- http://sperling.com http://ancientstones.com http://earthstones.com __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rounded Corners
G. Sørtun wrote: [...] Still rely on shaped corners in all browsers, with javascript or editor generated source-code... http://www.gunlaug.no/tos/wd_demo_shapes_03.html ...with or without images. Pure CSS solutions will have to wait till all major browsers have caught up. regards Georg Hello Georg, http://blogs.msdn.com/ie/archive/2009/11/18/an-early-look-at-ie9-for-developers.aspx IE9 will have rounded corners. Hooray! Going by the pass timetable, we may be testing IE9 early next year. -- Alan http://css-class.com/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Rounded Corners
I would like to know what people are doing to create rounded corners on div borders in non-mozilla , non-safari browsers. I thought I found a solution, which at least included opera, but I tried it and it isn't working there, either. Thanks, Chick __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rounded Corners
I would like to know what people are doing to create rounded corners on div borders in non-mozilla , non-safari browsers. AFAIK, the only way to accomplish it in IE and Opera is still with good old images. ---Tim __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rounded Corners
Climis, Tim wrote: I would like to know what people are doing to create rounded corners on div borders in non-mozilla , non-safari browsers. AFAIK, the only way to accomplish it in IE and Opera is still with good old images. That's what I did on my own website (obones.com) following very good advice received on this list and it works just fine. __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rounded Corners
Chick Newman wrote: I would like to know what people are doing to create rounded corners on div borders in non-mozilla , non-safari browsers. Still rely on shaped corners in all browsers, with javascript or editor generated source-code... http://www.gunlaug.no/tos/wd_demo_shapes_03.html ...with or without images. Pure CSS solutions will have to wait till all major browsers have caught up. regards Georg __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rounded Corners
On Wed, 2009-12-02 at 13:01 -0800, Chick Newman wrote:
I would like to know what people are doing to create rounded corners on div
borders in non-mozilla , non-safari browsers. I thought I found a solution,
which at least included opera, but I tried it and it isn't working there,
either.
My preferred method is to create a single image that contains all 4
corners. Then I set it as the background image for a 4 DIVs that are
each only big enough for one of the corners. I relatively or absolutely
position the element I want rounded corners on, then I absolutely
position the DIVs containing the corner images, putting one in each
corner of the parent.
Using this method works wherever CSS works, but it requires you to
change the image whenever you change background colors. It only
requires one very small image.
There are several ways to do it with JavaScript and no images. I've
even seen one method that uses an absolutely positioned round-style
bullet like the kind that's used in bulleted lists.
Check these out: http://delicious.com/Ghodmode/roundedcorners
There's also a script at curvycorners.net that should recognize when you
use CSS3 rounded corners in your stylesheet and apply rounded corners
using JavaScript when the browser doesn't support the CSS3. I've found
it works quite well, but it has some conflicts with jQuery. Although
the documentation says that it works in Opera if you put your style
information into the page rather than in a separate stylesheet, I've
found that it only works in Opera if I call it manually.
Here's my preferred method:
head
style type=text/css
body { background-color: gray; }
div#roundme {
background-color: white;
position: relative;
}
div.corner {
/* This would be an image containing 4 5px rounded
corners with a transparent inside and a gray background */
background-image: url('images/corners.png');
width: 5px;
height: 5px;
position: absolute;
font-size: 0px;
}
div.corner.tl {
background-position: bottom right;
top: 0;
left: 0;
}
div.corner.tr {
background-position: bottom left;
top: 0;
right: 0;
}
div.corner.bl {
background-position: top right;
bottom: 0;
left: 0;
}
div.corner.br {
background-position: top left;
bottom: 0;
right: 0;
}
/style
/head
body
div id=roundme
pThis is a paragraph!!/p
div class=corner tlnbsp;/div
div class=corner trnbsp;/div
div class=corner blnbsp;/div
div class=corner brnbsp;/div
/div
/body
--
Ghodmode
http://www.ghodmode.com
Thanks,
Chick
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Rounded corners in a css table layout?
Hi all, I need some help with my design. I want to display three equal-height boxes next to eachother, like this ASCI art: +--+ +--+ +--+ | | | | | | | | | | | | | | | | | | +--+ +--+ +--+ I also have an example online (with all the CSS) at: http://www.jejik.com/sander/temp/boxes/boxes.html The contents of the boxes varies in height. The tricky thing is that these boxes also need to have rounded corners. For that I am using the sliding doors technique. Basically, the markup of a box is something like this: div class=box div class=box-header h4header/h4 /div div class=box-body pContents/p /div /div Four block elements so I can make rounded corners and borders with background images. The top-right corner goes on the h4. The top left corner goes on the box-header. The bottom-right corner goes on the outer box div and the bottom-left corner goes on the box-body. I am using CSS display:table-cell to make all three boxes of equal height, but here my problem starts. All the box elements are now of equal height, but the box-body elements are not of equal height because the contents are not of equal height. Result: The bottom-right corners are not in the correct position. See also the link I posted. How can I fix that? All the box divs are equal in height now. I would like box-body to expand to use all available height, even when the content is short. I tried height:100% but that doesn't work. How can I make that work? Or is there an alternative way to achieve what I want? I cannot use something like faux-columns because I define the width of the boxes in ems. That means I cannot give the box div a single background image that provides both bottom corners. Google is being absolutely useless here. Any query involving corners and table just gives me a gazillion links to 1990's tutorials that use a 3x3 table for rounded corners. Any tips are greatly appreciated! Kind regards, -- Sander Marechal __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rounded corners repeating in IE6
Thanks so much -- unfortunately the 45 validation errors come from the code
that the client gave me to implement (their RSS feed), so nothing I can do
about that :(
I was thinking that probably the issues in IE6 are due to the peekaboo bug
(I think that's what it's called) because there are so many nested divs and
IE6 is basically freaking out and repeating stuff.
It gets even better - they want the 2 cols on the right to be in iframes, so
I've implemented that
http://www.language-works.com/SmartSign/template_frames3.htm but of course
with IE6 it wants a narrower frame, so it needs conditional comment ... but
I don't even know what platform they're developing on so have just put in a
double bit of code for now with the IE6 comment so they can know what width
to implement.
What worries me is that this code will be taken by some programmers and
messed with even further, and it seems to me that it's fragile, at best.
They've said as long as it displays on 1024 they're ok with it (though of
course it breaks horribly on anything less). IMO the design is meant for
print and not the web, but they don't wnat to hear that
Anne
- Original Message -
From: Alan Gresley a...@css-class.com
To: Anne E. Shroeder a...@language-works.com
Cc: css-d@lists.css-discuss.org
Sent: Friday, April 24, 2009 11:33 AM
Subject: Re: [css-d] Rounded corners repeating in IE6
Anne E. Shroeder wrote:
I'm using the technique described here:
http://webdevtips.co.uk/webdevtips/style/border.shtml to accomplish
rounded borders on this somewhat complex design - the client is insistent
on fixed heights, so it's been quite a trick. The problem now is that
the top right corner seems to be repeating itself and the bottom left and
right corners are not showing up at all in IE6:
http://www.language-works.com/SmartSign/template_frames2.htm
[...]
Anne
Hello Anne.
This page has many problems in IE6, one is that div#column3 has completely
dropped below the main content. There are also problems in IE7. The
initial problem area is in or surrounding the form in the 1st columns.
#column1 #login {
background-color:#FEFEFE;
width: 191px;
margin: 0 7px 19px 8px; padding:0;
}
#column1 form {
margin:-6px 8px 22px 8px;
}
Changing a width and a margin seems to bring IE6 under some control. BTW,
this is a hack fixed since I do not know what is quite happening. You have
stirred that cauldron of bugs that is IE6. :-)
* html #column1 #login { /* target IE6 */
width: 178px;
}
* html #column1 form { /* target IE6 */
margin-right:-4px;
}
Next changing overflow:auto to overflow:hidden remove the scrollbar in
IE6.
#column2 #newsBlurbs {
height:352px; padding: 5px 10px 5px 2px;
overflow:hidden; /* change for IE6 */ }
Next changing the margin-right on div#column3 (partially removing the
float) brings div#column3 up in the correct place.
* html #column3 {
margin-right:-29px;
}
This does not solve the problems that you state. Here is a little demo
with the hacks for IE6.
http://css-class.com/x/eO.htm
Something is causing some overflow of the background for div#column3.
Maybe correcting those 45 validation errors in the XHTML may help here.
Also, at this moment IE6 and IE7 are not handling those negative margins
on the list
#column3 ul li {
margin-left:-28px;
margin-top:-10px;
}
and this causes div#column3 to have greater height which effects the
positioning of the rounded corners at the bottom of div#column3. I will
take a greater look later.
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rounded corners repeating in IE6
Anne E. Shroeder wrote:
I'm using the technique described here:
http://webdevtips.co.uk/webdevtips/style/border.shtml to accomplish rounded
borders on this somewhat complex design - the client is insistent on fixed
heights, so it's been quite a trick. The problem now is that the top right
corner seems to be repeating itself and the bottom left and right corners
are not showing up at all in IE6:
http://www.language-works.com/SmartSign/template_frames2.htm
[...]
Anne
Hello Anne.
This page has many problems in IE6, one is that div#column3 has
completely dropped below the main content. There are also problems in
IE7. The initial problem area is in or surrounding the form in the 1st
columns.
#column1 #login {
background-color:#FEFEFE;
width: 191px;
margin: 0 7px 19px 8px;
padding:0;
}
#column1 form {
margin:-6px 8px 22px 8px;
}
Changing a width and a margin seems to bring IE6 under some control.
BTW, this is a hack fixed since I do not know what is quite happening.
You have stirred that cauldron of bugs that is IE6. :-)
* html #column1 #login { /* target IE6 */
width: 178px;
}
* html #column1 form { /* target IE6 */
margin-right:-4px;
}
Next changing overflow:auto to overflow:hidden remove the scrollbar in IE6.
#column2 #newsBlurbs {
height:352px;
padding: 5px 10px 5px 2px;
overflow:hidden; /* change for IE6 */
}
Next changing the margin-right on div#column3 (partially removing the
float) brings div#column3 up in the correct place.
* html #column3 {
margin-right:-29px;
}
This does not solve the problems that you state. Here is a little demo
with the hacks for IE6.
http://css-class.com/x/eO.htm
Something is causing some overflow of the background for div#column3.
Maybe correcting those 45 validation errors in the XHTML may help here.
Also, at this moment IE6 and IE7 are not handling those negative margins
on the list
#column3 ul li {
margin-left:-28px;
margin-top:-10px;
}
and this causes div#column3 to have greater height which effects the
positioning of the rounded corners at the bottom of div#column3. I will
take a greater look later.
--
Alan http://css-class.com/
Armies Cannot Stop An Idea Whose Time Has Come. - Victor Hugo
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Rounded corners repeating in IE6
I'm using the technique described here: http://webdevtips.co.uk/webdevtips/style/border.shtml to accomplish rounded borders on this somewhat complex design - the client is insistent on fixed heights, so it's been quite a trick. The problem now is that the top right corner seems to be repeating itself and the bottom left and right corners are not showing up at all in IE6: http://www.language-works.com/SmartSign/template_frames2.htm The basic code: div id=column3img src=login.eo_files/images/benefits_title2.gif alt=Benefits width=143 height=30 style=position:relative; top:25px;left:0;/ div class=tOrangediv class=bOrangediv class=lOrangediv class=rOrangediv class=blOrangediv class=brOrangediv class=tlOrangediv class=trOrangediv class=insideContent Stuff here /div/div/div/div/div/div/div/div /div!-- end column3 -- tOrange is being repeated, whereas blOrange and brOrange are not showing up at all. Thoughts? Anne __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rounded corners with fixed height problem
Hi Anne On 3/25/09 9:14 PM, Anne E . Shroeder a...@language-works.com wrote: I've got a bit of a challenge with rounded corners - have a fixed height (it's all going into an iframe) and cannot seem to get the borders out to the edge and the rounded corners placed - an additional problem is that the comp calls for only half of a top border and a small dotted border above that - I'm just not sure that can be done? The graphics for the rounded corners aren't very good - they are just place holders. The problem is in the right hand column that starts with Benefits. What you are attempting to do is very challenging with fluid layouts. I suggest you keep the last column width in pixels and use a background image (with the dotted lines and rounded corners for top and just the rounded corner on the bottom) to get the effect you are looking for. - divya __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Rounded corners with fixed height problem
I've got a bit of a challenge with rounded corners - have a fixed height (it's all going into an iframe) and cannot seem to get the borders out to the edge and the rounded corners placed - an additional problem is that the comp calls for only half of a top border and a small dotted border above that - I'm just not sure that can be done? The graphics for the rounded corners aren't very good - they are just place holders. The problem is in the right hand column that starts with Benefits. The method I used: http://www.webcredible.co.uk/user-friendly-resources/css/css-round-corners-borders.shtml My code: http://www.language-works.com/SmartSign/template.htm The comp: http://www.language-works.com/SmartSign/homepage.jpg I'd greatly appreciate any insights as I've been hitting my head against the wall for some time now. Anne __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rounded corners + shaded background. What was I thinking?
Jody Levinson wrote:
I've been tearing my hair over this one and it's my own fault for
coming up with the design:
http://www.ishrgroup.com/
The rounded corners and flexible width body work fine in FF. In IE 7,
the flexible width works ok, but the rounded corners on the main
content area refuse to line up consistently. In IE 6, they wont line
up at all and the width won't flex.
To start with, add...
* html .bigi {position: absolute;}
...to get that element out of the way in IE6 since it doesn't support
'position: fixed'.
Then, add 'margin-right: -40px;' to all left-floating corners, since IE6
can't line up two 50% wide elements in a 100% wide container - it runs
out of space. That addition will give IE6 a 10px invisible gap it can
put its calculation-bugs in, with no negative effect on other browsers.
To make sure Firefox won't miss a pixel in width in the middle between
those floating corners, it might be a good idea to add 'padding-right:
1px;' on all the left-floating ones.
You probably also want to hide the vertical overflow on those corners,
as they don't look very nice in any browser when subjected to font-resizing.
The css has one tag that won't validate - Property _width doesn't
exist : 700px - an attempt to set a minimum width.
Delete it, it won't work anyway and only cripples IE6' ability to get
the width correct on wide windows.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Rounded corners + shaded background. What was I thinking?
I've been tearing my hair over this one and it's my own fault for coming up with the design: http://www.ishrgroup.com/ The rounded corners and flexible width body work fine in FF. In IE 7, the flexible width works ok, but the rounded corners on the main content area refuse to line up consistently. In IE 6, they wont line up at all and the width won't flex. styles are here: http://www.ishrgroup.com/ishr-styles.css http://www.ishrgroup.com/common-styles.css The css has one tag that won't validate - Property _width doesn't exist : 700px - an attempt to set a minimum width. Thanks! Jody -- TroutDream Graphics, Inc. Always fresh. Never canned. http://troutdream.com 425-883-8277 928-833-8277 fax __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Rounded Corners Problem in IE7
Hi folks, I'm working on this page: http://clients2.jdgcommunications.com/csshelp/working.html which displays fine in Firefox and Safari. However, in IE7, the bottom rounded corners of the main DIV (the middle-nested, medium-gray box) aren't showing up. I've tried changing margins and padding to no avail. The structure of that DIV and the way corners are applied to it are identical to the wrapper and sidebar DIVs, which display OK. Can anybody see what I've done wrong? HTML and CSS files validate OK. Thanks, Jim __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Rounded Corners Problem - IE7
[Apologies if this shows up on the list multiple times. I posted Friday, and again yesterday, from my work email address but nothing made it to the list. I'm trying from an alternate address now.] Hi folks, I'm working on this page: http://clients2.jdgcommunications.com/csshelp/working.html which displays fine in Firefox and Safari. However, in IE7, the bottom rounded corners of the main DIV (the middle-nested, medium-gray box) aren't showing up. I've tried changing margins and padding to no avail. The structure of that DIV and the way corners are applied to it are identical to the wrapper and sidebar DIVs, which display OK. Can anybody see what I've done wrong? HTML and CSS files validate OK. Thanks, Jim __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rounded Corners -- Simplest Way
On 7/8/08, Sohail Aboobaker [EMAIL PROTECTED] wrote: Hi, What is the simplest way to create rounded corners using CSS. I saw a technique using 3 extra div tags for three corner images (left-bottom, right-bottom, left top) which seemed cumbersome and the posting was old. Are there any newer and simpler ways of creating rounded boxes containers? Depends on your requirements: The need for multiple elements is based on the idea that using background images as corners is morally better than adding foreground images (and looks less ugly in the absence of stylesheets) - you need one element to hang each background on*. If you have a fluid-width, fluid height box, you therefore need four elements. If the box is fixed-width, you only need two. If it has a fixed height as well, you can get away with one, but I'd only risk this on an element containing nothing but a single image. If the element has borders, it gets more complex: I've seen methods using 8 elements (just as bad as a table) or using positioning jiggles with mixed success. The wiki has a pretty comprehensive round-up of methods. *Until everyone implements the backgrounds module of css3, at which point rounded corners will become much easier, but I'm picking that everyone will support border-radius before that. -- Richard Grevers, New Plymouth, New Zealand Dramatic Design www.dramatic.co.nz __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Rounded Corners -- Simplest Way
Hi, What is the simplest way to create rounded corners using CSS. I saw a technique using 3 extra div tags for three corner images (left-bottom, right-bottom, left top) which seemed cumbersome and the posting was old. Are there any newer and simpler ways of creating rounded boxes containers? Regards, Sohail __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rounded Corners -- Simplest Way
Here's how I do it, yes it uses divs but it's always served me very well: http://jake.cfwebtools.com/2008/02/13/css-rounded-corners/ Jake Churchill CF Webtools 11204 Davenport, Ste. 100 Omaha, NE 68154 http://www.cfwebtools.com 402-408-3733 x103 Sohail Aboobaker wrote: Hi, What is the simplest way to create rounded corners using CSS. I saw a technique using 3 extra div tags for three corner images (left-bottom, right-bottom, left top) which seemed cumbersome and the posting was old. Are there any newer and simpler ways of creating rounded boxes containers? Regards, Sohail __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rounded Corners -- Simplest Way
Sohail Aboobaker wrote: What is the simplest way to create rounded corners using CSS. Sohail This comes up on the list frequently from time to time, and it may be worth while checking the list archives for previous replies... -- http://chelseacreekstudio.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rounded Corners -- Simplest Way
At 10:48 AM -0400 7/7/08, Sohail Aboobaker wrote: Hi, What is the simplest way to create rounded corners using CSS. I saw a technique using 3 extra div tags for three corner images (left-bottom, right-bottom, left top) which seemed cumbersome and the posting was old. Are there any newer and simpler ways of creating rounded boxes containers? Regards, Sohail There's my solution: http://sperling.com/examples/box/ and then a box in box I prepared: http://www.webbytedd.com/ccc/box-box/ Feel free to use what you want. Cheers, tedd -- --- http://sperling.com http://ancientstones.com http://earthstones.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rounded corners on menu
Hi Albert, Here are some more rounded corner approaches. The first I like best, the nifty corners, as it's a very easy and flexible solution, and doesn't require additional mark-up. The disadvantage is that it's pure Javascript, it may not be suitable for all situations (although it works cross-browser). I've applied it here: http://www.monimbo.org/ http://www.html.it/articoli/niftycube/index.html Nifty Corners Cube - freedom to round http://www.albin.net/css/roundedcorners CSS | “Bullet-Proof” Rounded Corners | Albin.Net http://css-discuss.incutio.com/?page=RoundedCorners Rounded Corners - css-discuss See ya! Loek Albert van der Veen wrote: Hi list, I would like to round the corners, using css, on this site: http://www.ediec.org Menu should size when one increases/decreases the font. Examples of sites that do this (rounded corners on all corners, not just tabs) are much appreciated. thanks, Albert __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Rounded corners on menu
Hi list, I would like to round the corners, using css, on this site: http://www.ediec.org Menu should size when one increases/decreases the font. Examples of sites that do this (rounded corners on all corners, not just tabs) are much appreciated. thanks, Albert __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rounded corners on menu
http://jake.cfwebtools.com/index.cfm/2008/2/13/CSS-Rounded-Corners _ Jake Churchill Team Leader 11204 Davenport, Ste. 100 Omaha, NE 68154 http://www.cfwebtools.com 402-408-3733 x103 -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Albert van der Veen Sent: Tuesday, February 26, 2008 8:47 AM To: CSS Discuss Subject: [css-d] Rounded corners on menu Hi list, I would like to round the corners, using css, on this site: http://www.ediec.org Menu should size when one increases/decreases the font. Examples of sites that do this (rounded corners on all corners, not just tabs) are much appreciated. thanks, Albert __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ No virus found in this incoming message. Checked by AVG Free Edition. Version: 7.5.516 / Virus Database: 269.21.1/1298 - Release Date: 2/25/2008 8:45 PM No virus found in this outgoing message. Checked by AVG Free Edition. Version: 7.5.516 / Virus Database: 269.21.1/1298 - Release Date: 2/25/2008 8:45 PM __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Rounded corners oddity in IE
Hello everyone. I'm using Franky's rounded corners for a site, and it works great in Firefox and Opera on Windows, but the design is acting strangely in IE 6. There are two boxes of content with the rounded corners. The 2nd box is fine, but the header box has problems with the bottom two corners. Linky - http://www.dragon-sea.net/tests/corners2.html and http://www.dragon-sea.net/tests/corners.css Removing display:inline from the h1 style fixes the corners, but messes up the overall look. Can someone explain to me why display:inline is makes IE throw up and what I could do to fix it? In the meantime, I'll make a FixStupidIE.css sheet to remove the display:inline and tweak the position so it displays correctly. Thanks, Deb __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rounded corners and csszengarden principles
Gunlaug Sørtun wrote: Am I right that this is the only set of choices? Not quite, as CSS can carry it alone... http://virtuelvis.com/gallery/css/rounded/ ...but a certain series of browsers doesn't support CSS that well. I like this one... Same approach as in my first post: http://www.ambiguism.com/sandbox/scripts/mozilla.html I like this one for when rounded corners are not crucial to the overall look/feel... for the browsers that play nice, they get nice corners... others get the standard look. Otherwise, I go for the multi-div.class containers. M -- Wishlist: http://snipurl.com/vrs9 Switch: http://browsehappy.com/ BCC?: http://snipurl.com/w6f8 My: http://del.icio.us/mhulse __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rounded corners and csszengarden principles
Gunlaug, Micky, Thank you for the links to the CSS and HTML code necessary to put corners in as I'm looking to do. However, I don't seem to be using the :before and :after tags correctly. Is there something wrong with my code? I have an example here: http://articlass.org -- Dave M G Ubuntu 6.10 Edgy Eft Kernel 2.6.17.7 Pentium D Dual Core Processor PHP 5, MySQL 5, Apache 2 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rounded corners and csszengarden principles
Dave M G wrote:
Is there something wrong with my code? I have an example here:
http://articlass.org
Try changing your source code to:
div class=wholeContainer
Or change your CSS to:
#wholeContainer:before { ...yadda... )
#wholeContainer:after { ...yadda... }
Keep in mind, this technique is not fully supported, but degrades
gracefully (from what I have seen and tested.)
Good luck,
Cheers,
Micky
--
Wishlist: http://snipurl.com/vrs9
Switch: http://browsehappy.com/
BCC?: http://snipurl.com/w6f8
My: http://del.icio.us/mhulse
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Rounded corners and csszengarden principles (was: Placing images in corners)
CSS Discussers. Thank you for the tips on how to achieve round, and other stylized, corners. However, I'm feeling a little conflicted about my approach. I'm working on creating a PHP based content management system that will generate standardized HTML which can be formatted entirely with CSS. My inspiration for this is csszengarden. However, after comparing some of the tutorials for rounded corners with the HTML and CSS of csszengarden, I notice that there doesn't seem to be any fluid csszengarden designs that use rounded corners. All designs either have static sizes with all sorts of crazy borders and stuff, or they have fluid designs that have no particular emphasis on borders or corners. I should qualify my statement by saying there are a heck of a lot of examples on csszengarden these days, so it's entirely possible that even though I looked at many, there are many more which might counter my impression. But in any case, it seems that to have stylized corners in a fluid design, one needs to add additional classes or DIVs to the HTML. Even the Javascript options I looked at required a little bit of additional markup in the HTML. In keeping with my goal that the PHP system generate uniform HTML and that *all* formatting be done with CSS, it seems there are only two choices. One is to add some extra HTML markup which would enable stylized, fluid corners, but be useless to CSS layouts that didn't need such corners. The other choice is to have tighter HTML, but concede to not having certain effects, like special corners. Am I right that this is the only set of choices? Can anyone suggest how to converge the csszengarden principle with stylized corners without creating HTML that is too bloated? Any advice or information would be very helpful. Thank you. -- Dave M G Ubuntu 6.10 Edgy Eft Kernel 2.6.17.7 Pentium D Dual Core Processor PHP 5, MySQL 5, Apache 2 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rounded corners and csszengarden principles
Dave M G wrote: In keeping with my goal that the PHP system generate uniform HTML and that *all* formatting be done with CSS, it seems there are only two choices. One is to add some extra HTML markup which would enable stylized, fluid corners, but be useless to CSS layouts that didn't need such corners. The other choice is to have tighter HTML, but concede to not having certain effects, like special corners. Am I right that this is the only set of choices? Not quite, as CSS can carry it alone... http://virtuelvis.com/gallery/css/rounded/ ...but a certain series of browsers doesn't support CSS that well. Javascript can solve some... http://www.gunlaug.no/tos/wd_demo_shapes_03.html ...but there are limitations. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rounded corners
On 1/31/07, Jonathan Carter [EMAIL PROTECTED] wrote: Thanks a lot for the tip George. Unfortunately my scenario doesn't accomodate fixed width containers. I have a two column fluid layout and both columns need to have rounded edges, and child elements of both containers need to be rounded as well. I've tried numerous different methods for this and I always seem to come up short on each one. You should be able to find a suitable method here - an amazing collection on rounded corners! http://www.smileycat.com/miaow/archives/44.html Cheers George Shape Shed | www.shapeshed.comn __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rounded corners
George Ornbo wrote: On 1/31/07, Jonathan Carter [EMAIL PROTECTED] wrote: Thanks a lot for the tip George. Unfortunately my scenario doesn't accomodate fixed width containers. I have a two column fluid layout and both columns need to have rounded edges, and child elements of both containers need to be rounded as well. I've tried numerous different methods for this and I always seem to come up short on each one. You should be able to find a suitable method here - an amazing collection on rounded corners! http://www.smileycat.com/miaow/archives/44.html Cheers George Hi Jonathan, As Paul Novitsky wrote already, it's difficult to give a general advice, 'cause without a practical example we cannot see which of the many possibilities can be applied. Do you have a link to a test page? Looking for (and trying out) the enormous amount of solutions on the web: indeed this doesn't make happy! Especially because the most examples don't show the hidden treasures: the conditions which has to be fulfilled to get the model working. Some does have a fixed width condition, but don't say that. Some suppose a solid background color, but don't say that. And so on, and so on! I can imagine you will be a bit tired of the collection of solutions testing all results (lots appear to be the same, after testing...). - That is just the experience as I had some years ago. At a certain moment, I decided not to search any longer, but to try to develop my own solution: a multi purpose model. * For the whole story, my basic conditions / goals, and the solution(s) I found: see Liquid Round Corners http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm * Examples you can find in the Liquid Corners Playgarden http://home.tiscali.nl/developerscorner/liquidcorners/liquid-corners-playgarden-index.htm * More examples, often triggered by css-d questions, you can find in the index of Francky's Developers Corner http://home.tiscali.nl/developerscorner/ If I'm guessing right, what you want is more or less illustrated in More Corner Examples, Example 4 http://home.tiscali.nl/developerscorner/liquidcorners/more-rounded-corners_step1.htm (I added a new step 4 to show the possibility of nested liquid corners) * Even the IE's (5.01 up to 7) can handle it; see browsershots http://browsershots.org/screenshots/baa7ce50f2dc7bd61bd1d05f8856a73d/ @smileycat-list: in the list is indicated that my Liquid Corners (called Tiscali, which is the name of my ISP ;-) ) need 4 images - that's wrong, you need only 1 small image if only corners are wanted, and another small image if also a home made border around is needed. @lists-of-rounded-corner-solutions: also in the css-d Wiki is a special Rounded Corner Page http://css-discuss.incutio.com/?page=RoundedCorners. Some time ago I started to evaluate these solutions. The work is not finished yet (long term between other occupations...), but I already made a kind of acid proof for the support (or not) of transparency. Screenshots of all tested solutions are added. * See Testing rounded corner web solutions http://home.tiscali.nl/developerscorner/liquidcorners/wiz/wiz-step1-more-practice.htm My conclusion: in the customized corners with only css and images there are only 3 solutions which are liquid and support transparency of the outside of the corners (Søren Madsen in ALA, Roger Johansson in 456bereastreet, and francky). Note: in the ALA article big area images are used for the corners (nevertheless the layout is breaking at large font sizes). In basic model, the Bereastreet solution and my solution is the same. - If I had seen this before (amidst of all others), I shouldn't have invented the Liquid Corners, but just extended the work! :-) Greetings and success, (and as said, if you have a testpage, we can see what we can do) francky __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Rounded corners
I have to implement rounded corners throughout an entire site which includes many different size containers and elements. I'm looking to find the best/cleanest/easiest solution that I can easily implement site wide. I've looked at numerous examples/solutions and am confused as to which one is going to be the best suited for my situation. Sorry if this is a stupid/repeated question, I'm just having some frustration getting this to work. I appreciate all the help, Jonathan __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rounded corners
On 1/31/07, Jonathan Carter [EMAIL PROTECTED] wrote: I have to implement rounded corners throughout an entire site which includes many different size containers and elements. I'm looking to find the best/cleanest/easiest solution that I can easily implement site wide. I've looked at numerous examples/solutions and am confused as to which one is going to be the best suited for my situation. Sorry if this is a stupid/repeated question, I'm just having some frustration getting this to work. I appreciate all the help, Jonathan Hello Jonathan, Funny you should ask - I've just written this up: http://www.shapeshed.com/journal/curved_boxes_in_css/ Works well if you have a fixed with design. Cheers George www.shapeshed.com | Web and Graphic design __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rounded corners
At 1/30/2007 06:32 PM, Jonathan Carter wrote: I have to implement rounded corners throughout an entire site which includes many different size containers and elements. I'm looking to find the best/cleanest/easiest solution that I can easily implement site wide. I've looked at numerous examples/solutions and am confused as to which one is going to be the best suited for my situation. To get intelligent recommendations, you'll need to explain what your situation is. Resizability? Images? Transparent corners? etc. Regards, Paul __ Juniper Webcraft Ltd. http://juniperwebcraft.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] rounded corners display problems in ie
Hi All, I'm trying a test page to do a rounded corners using the sliding doors style. You can see the file at: http://www.learnerdesign.com/acufamily/box.html It looks fine in firefox, but in IE, the right border pops over and the box breaks. I am trying to have the it as one smooth rounded corner container. I thought I had the divs all in the right order. Do I need to add an IE conditional comment? Any help would be greatly appreciated. Many Thanks, Noah __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7 information -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] rounded corners no color fill
[EMAIL PROTECTED] wrote:
http://www.availcompany.com/webdev/webcode/css_test11.htm
Also, as you can see that the no image approach with nifty corners
works in the box above, it is just the top is gapping up, any clues
on how to get nifty corners to round a box with no images and no
color fill, just a 1 px border ?
1: add...
.xboxcontent {padding: 1px 0;}
...to keep margins from collapsing - escaping the box - and create the gap.
2: change margins on content - especially h2 in your case - to make it
line up as you want inside the box.
regards
Georg
--
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] rounded corners no color fill
On 9/24/06, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote: Hi All, many examples have been on color filled boxes with rounded corners, few if any on simply transparent boxes with rounded corners. In http://www.availcompany.com/webdev/webcode/css_test11.htm on 9/25/06 Manuel stated: Dino, I've had success with Douglas Livingstone's easyCorners technique. Unfortunately his site is not online anymore. Kind of found it here, but without the images :s http://web.archive.org/web/20030611042446/http://www.redmelon.net/tstme/ 4corners/ You can see it at work here: http://www.raoulwallenberg.net/ (Look for the .roundBox class) The technique is *extensively* cross browser tested. It's a bit bloated on the HTML side, and can take some time to cut the images, but it's relatively straightforward. Even more, this might be of help in generating the images: http://www.neuroticweb.com/recursos/css-rounded-box/index.php?idioma=en Thanks Manuel, for the tip, you can see my attempt to apply easyCorners technique at http://www.availcompany.com/webdev/webcode/css_test11.htm . How do you get the top to round with this approach ? Also, as you can see that the no image approach with nifty corners works in the box above, it is just the top is gapping up, any clues on how to get nifty corners to round a box with no images and no color fill, just a 1 px border ? Thx, dino __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] rounded corners no color fill
Hi All, many examples have been on color filled boxes with rounded corners, few if any on simply transparent boxes with rounded corners. In http://www.availcompany.com/webdev/webcode/css_test11.htm 1. left float rounded box without color fill, how do you get the top border not to gap up? 2. how do you get right float to line up with the top of left box and to show rounded corners ? thx, dino __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] rounded corners no color fill
On 9/24/06, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote: Hi All, many examples have been on color filled boxes with rounded corners, few if any on simply transparent boxes with rounded corners. In http://www.availcompany.com/webdev/webcode/css_test11.htm Dino, I've had success with Douglas Livingstone's easyCorners technique. Unfortunately his site is not online anymore. Kind of found it here, but without the images :s http://web.archive.org/web/20030611042446/http://www.redmelon.net/tstme/4corners/ You can see it at work here: http://www.raoulwallenberg.net/ (Look for the .roundBox class) The technique is *extensively* cross browser tested. It's a bit bloated on the HTML side, and can take some time to cut the images, but it's relatively straightforward. Even more, this might be of help in generating the images: http://www.neuroticweb.com/recursos/css-rounded-box/index.php?idioma=en HTH, -- Manuel Razzari YO - http://ultimorender.com.ar/funkascript CVAM - http://conVistaAlMar.com.ar __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Rounded corners with transparency??
Folks, Has anyone come up with a trick to meld a rounded corner, liquid height DIV with a rather tall background URL that is a slice of the underlying background thereby giving the illusion of transparency? Clear as mud? Probably simpler if I show you an example of what I'm working on: http://www.qvcc.commnet.edu/temp/index.html I'd like to be able to grow the two rounded corner boxes vertically on the fly. Thanks, Michael Lynch Webmaster Quinebaug Valley Community College __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rounded corners with transparency??
At 10:33 AM 8/25/2006, you wrote: Has anyone come up with a trick to meld a rounded corner, liquid height DIV with a rather tall background URL that is a slice of the underlying background thereby giving the illusion of transparency? Clear as mud? Probably simpler if I show you an example of what I'm working on: http://www.qvcc.commnet.edu/temp/index.html I'd like to be able to grow the two rounded corner boxes vertically on the fly. This rounded corner box scheme works very well. http://www.456bereastreet.com/lab/flexible_custom_corners_borders/ Why not use this and actually make the box transparent to let the background show through? Matt __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] rounded corners issue
Gunlaug Sørtun wrote: Jeralyn Merideth wrote: Any other suggestions anyone? http://216.119.67.187/js/index.htm No problem whatsoever. Just pull those top and bottom corner-parts over the edge of their container, and style them without a background. Then those rounded corners will go with any page-background. 1: adjust position of the main container, by adding... [...] 2: treat the sidebar the same way, by adding... [...] Now, you are using an ID over and over again, #sidebar, so that should be changed into a class since IDs should only appear once in each page. regards Georg Hi Jeralyn, Knowing Georg likes alternatives ;-) , I was carpenting an image variant to the nifty corners (I don't appreciate the b/b things too much - difficulties with my imagination - like html-Tidy I always want to delete them in the html ...). Working as follows: * paint a small image with the top and bottom corners (172 bytes), save it as gif with transparent corners outside. * the html consists of a container, and inside: a top box with the top corners, then a content box with the content and the solid background, then a bottom corner box (and then closing of the first container). * in your case it is a fixed width column [1], so the left and right corners don't need to be in a separate box to become liquid: less div's! I applicated it only to the sidebar new-items, the content corners can be treated in a similar way. [2] Tested in html-validator, css-validator, FF (1.07), IE6, Opera (7.54 and 8.01), the old NS6 .2 ( see [3] ), and Mozilla 1.71. This is the testpage http://home.tiscali.nl/developerscorner/css-discuss/test-jeralyn-a.htm. :-) I saw you got it working in the meantime! Greetings, francky btw-1: good looking navbar. :-) Oh, to get a 2 word item in the same line (if enlarged) , you can replace the space between by a nbsp;. btw-2: some 25kB can be saved by reworking the images (see comments in source code testpage). Modem visitors will be gratefull! btw-3: noticed a typo in the company-stamp in the header. ;-) [1] For a 100% liquid way and more about the image method see: liquid corners article http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm. [2] The 2 corner image parts of the content box can be combined with the img of the sidebar (with proper positioning): still only 1 img needed. [3] Here the hidden header (#mainhead h2, in case of disabled images or disabled css) is always showed in NS6.2 and disturbing the rest of the lay out. - This is a screenshot http://home.tiscali.nl/developerscorner/css-discuss/images/jeralyn-screenshot_NS6.png. - As compensation: NS6 is not showung the nifty corners (in the content column)... A quick and easy workaround for the hidden header I didn't find. - That is: 5 or 6 working workarounds, also good for all other browsers ... except IE. Maybe the best way is to delete the text from the header image, and make real text of it (with an adapted h2 style for the first line). __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] rounded corners issue
Thanks to everyone who helped with my last issue. Now, I'm having problems with the rounded corners. Before I added a background image to the wrapper, it was fine. Now, after adding the image you can see the white squared corners. Looking into the code I see where the problem lies, but I am having difficulties separating the rbottoms from the rtops in order to fix it. This and because the bg image is a gradient it is making it more difficult to me. Am I destined to have a plain white background to keep the round corners? Thanks, http://216.119.67.187/js/index.htm (w/o image) http://216.119.67.187/js/images/screen1.jpg (corner problem) Jeralyn - Do you Yahoo!? Get on board. You're invited to try the new Yahoo! Mail Beta. - Do you Yahoo!? Get on board. You're invited to try the new Yahoo! Mail Beta. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] rounded corners issue
Am I destined to have a plain white background to keep the round corners? Just make the corners transparent. :-) Since you aren't using anti-aliasing, it won't be a problem. -- Marc Luzietti Flagship Project Bayview Financial, L.P. (305) 341-5624 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] rounded corners issue
I tried that and it didn't help...still looked the same. I simply put a
{background: transparent;} on the bg that are now white but I didn't see a
change. Did I miss something in the declaration?
J
[EMAIL PROTECTED] wrote:
Am I destined to have a plain white background to keep the round corners?
Just make the corners transparent. :-) Since you aren't using anti-aliasing, it
won't be a problem.
--
Marc Luzietti
Flagship Project
Bayview Financial, L.P.
(305) 341-5624
-
How low will we go? Check out Yahoo! Messengers low PC-to-Phone call rates.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] rounded corners issue
I meant, make the corners in the image itself transparent in Photoshop or whichever image program you use. If the white corners are still there, then you've probably got a background color declared somewhere. I have foolishly deleted your original e-mail, so I can't take a second look -- Marc Luzietti Flagship Project Bayview Financial, L.P. (305) 341-5624 __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] rounded corners issue
I didn't use images. They are css rounded corners taken from the article Nifty Corners :) [EMAIL PROTECTED] wrote: I meant, make the corners in the image itself transparent in Photoshop or whichever image program you use. If the white corners are still there, then you've probably got a background color declared somewhere. I have foolishly deleted your original e-mail, so I can't take a second look -- Marc Luzietti Flagship Project Bayview Financial, L.P. (305) 341-5624 - Do you Yahoo!? Everyone is raving about the all-new Yahoo! Mail Beta. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] rounded corners issue
I wouldn't use that anyway as the corners look a bit ragged. Why not just use a transparent png and then apply the ie fix. R. - Original Message - From: Jeralyn Merideth [EMAIL PROTECTED] To: [EMAIL PROTECTED] Cc: [EMAIL PROTECTED]; css-d@lists.css-discuss.org Sent: Tuesday, July 18, 2006 5:19 PM Subject: Re: [css-d] rounded corners issue I didn't use images. They are css rounded corners taken from the article Nifty Corners :) [EMAIL PROTECTED] wrote: I meant, make the corners in the image itself transparent in Photoshop or whichever image program you use. If the white corners are still there, then you've probably got a background color declared somewhere. I have foolishly deleted your original e-mail, so I can't take a second look -- Marc Luzietti Flagship Project Bayview Financial, L.P. (305) 341-5624 - Do you Yahoo!? Everyone is raving about the all-new Yahoo! Mail Beta. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] rounded corners issue
I'm not familiar with how to do this graphically. I know I would have to use PS to make the image (of course) but I wouldn't know the appropriate size for the boxes I need...and then wouldn't I have to position them relative or absoute? Not sure what to do. Any other suggestions anyone? [EMAIL PROTECTED] wrote: I wouldn't use that anyway as the corners look a bit ragged. Why not just use a transparent png and then apply the ie fix. R. - Original Message - From: Jeralyn Merideth To: Cc: ; Sent: Tuesday, July 18, 2006 5:19 PM Subject: Re: [css-d] rounded corners issue I didn't use images. They are css rounded corners taken from the article Nifty Corners :) [EMAIL PROTECTED] wrote: I meant, make the corners in the image itself transparent in Photoshop or whichever image program you use. If the white corners are still there, then you've probably got a background color declared somewhere. I have foolishly deleted your original e-mail, so I can't take a second look -- Marc Luzietti Flagship Project Bayview Financial, L.P. (305) 341-5624 - Do you Yahoo!? Everyone is raving about the all-new Yahoo! Mail Beta. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ - Groups are talking. Were listening. Check out the handy changes to Yahoo! Groups. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] rounded corners issue
Just make the exact image dimensions and radius with the heading 'news1' . Save it as a transparent png (no background) in your image editing program. Fireworks is the best for this Create the div as before but put the img in. I rember trying to put it in as a background-image but this does not support transparency so you will have to use the img tag. For ie you need to add the png transparency fix by adding this at the head. script defer type=text/javascript src=pngfix.js/script all the files you need are here, just open the image.png file in photoshop and save 3 versions with your headings - make sure you re-save them as transparent pngs and not jpegs or gifs. http://www.blue-fly.co.uk/rooftops/example.html http://www.blue-fly.co.uk/rooftops/image.png http://www.blue-fly.co.uk/rooftops/pngfix.js - Original Message - From: Jeralyn Merideth [EMAIL PROTECTED] To: [EMAIL PROTECTED] Cc: css-d@lists.css-discuss.org Sent: Tuesday, July 18, 2006 6:34 PM Subject: Re: [css-d] rounded corners issue I'm not familiar with how to do this graphically. I know I would have to use PS to make the image (of course) but I wouldn't know the appropriate size for the boxes I need...and then wouldn't I have to position them relative or absoute? Not sure what to do. Any other suggestions anyone? [EMAIL PROTECTED] wrote: I wouldn't use that anyway as the corners look a bit ragged. Why not just use a transparent png and then apply the ie fix. R. - Original Message - From: Jeralyn Merideth To: Cc: ; Sent: Tuesday, July 18, 2006 5:19 PM Subject: Re: [css-d] rounded corners issue I didn't use images. They are css rounded corners taken from the article Nifty Corners :) [EMAIL PROTECTED] wrote: I meant, make the corners in the image itself transparent in Photoshop or whichever image program you use. If the white corners are still there, then you've probably got a background color declared somewhere. I have foolishly deleted your original e-mail, so I can't take a second look -- Marc Luzietti Flagship Project Bayview Financial, L.P. (305) 341-5624 - Do you Yahoo!? Everyone is raving about the all-new Yahoo! Mail Beta. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ - Groups are talking. We're listening. Check out the handy changes to Yahoo! Groups. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] rounded corners issue
http://216.119.67.187/js/index.htm Now, you are using an ID over and over again, #sidebar, so that should be changed into a class since IDs should only appear once in each page. Regarding the above... my mistake, sorry. However, it should work just fine as one class instead of 3 different IDs :-) Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] rounded corners issue
just curious, why do you choose to use a transparent .png and apply the ie fix rather than use a transparent .gif? quality, less jagged? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Rounded corners problem on Mac OSX FF
Hi list,
I don't have access to a Mac to debug this myself, I was wondering if
someone on the list might be able to explain what was happening here?
http://www.danwashere.com/dev/aauk/celeb_blackboard/index.html
I'm told that on the rounded corner in the bottom right of the large white
text box is being interfered with by what appears to be a white border
stretching down.
I'm not seeing that problem on Win XP, FF1.5, IE5, IE5.5 or IE6 - they all
show the page fine.
Here's the CSS that I think is relevant - but of course I'm not sure what's
actually causing this problem so it could be anything I guess..
#text_block_wrapper_1 {
float: left;
margin:0px;
padding:0px;
width: 260px;
background: transparent url(images/text_block_middle.gif) left top
repeat-y;
}
#text_block_wrapper_2 {
float: left;
margin:0px;
padding:0px;
width: 260px;
background: transparent url(images/text_block_top.gif) left top no-repeat;
}
#text_block {
float: left;
margin:0px;
padding:12px;
padding-top:16px;
padding-bottom:16px;
font-size: 0.8em;
background: transparent url(images/text_block_bottom.gif) left bottom
no-repeat;
}
#text_block p {
margin:0px;
padding:0px;
margin-bottom: 0.8em;
}
As you can see I've achieved the rounded corners by having a fixed width
column defined by 3 nested DIVS - the lowest div has a background of 260 x 1
px gif to define the sides of the column, then the next DIV has a bg image
of the top of the rounded corner rectangle, and the last one holds the
bottom image of the block.
Thanks for any help,
Dan.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rounded corners problem on Mac OSX FF
Dan Searle wrote: http://www.danwashere.com/dev/aauk/celeb_blackboard/index.html I'm told that on the rounded corner in the bottom right of the large white text box is being interfered with by what appears to be a white border stretching down. I'm not seeing that problem on Win XP, FF1.5, IE5, IE5.5 or IE6 - they all show the page fine. It becomes visible in Firefox 1.5.0.4 on a PC too, if/when you bump up font-sizes step by step. Probably a rounding-error caused by Firefox' over-precise calculations. Probably best solved by making the side/corner elements a px or two wider - fine-tune them - and make them overlap / cover up for such errors. That won't hurt in other browser either, as there's a (barely) visible red line down the right side of that white container in all of them - resulting from image-smoothing or something in the image itself. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rounded corners problem on Mac OSX FF
Hi list, I don't have access to a Mac to debug this myself, I was wondering if someone on the list might be able to explain what was happening here? http://www.danwashere.com/dev/aauk/celeb_blackboard/index.html I'm told that on the rounded corner in the bottom right of the large white text box is being interfered with by what appears to be a white border stretching down. Dan: It looks fine to me -- in fact, one of the best rounded corner examples I've seen. Good work. tedd -- http://sperling.com http://ancientstones.com http://earthstones.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rounded corners problem on Mac OSX FF
Dan Searle wrote: Hi list, I don't have access to a Mac to debug this myself, I was wondering if someone on the list might be able to explain what was happening here? http://www.danwashere.com/dev/aauk/celeb_blackboard/index.html I'm told that on the rounded corner in the bottom right of the large white text box is being interfered with by what appears to be a white border stretching down. I'm not seeing that problem on Win XP, FF1.5, IE5, IE5.5 or IE6 - they all show the page fine. Here's the CSS [...] Hi Dan, I can see the problem in IE6 on Win(98SE) too: screenshot-1 http://home.tiscali.nl/developerscorner/css-discuss/images/blackboard-1.png. and in FF1.07 on pc: screenshot-2 http://home.tiscali.nl/developerscorner/css-discuss/images/blackboard-2.png It is not a white border, but the inside image of the box peeping through, as can be seen by canceling the text_block_middle.gif screenshot-3 http://home.tiscali.nl/developerscorner/css-discuss/images/blackboard-3.png. Seems to be the floating of the inside wrappers (which you don't need): screenshot-4 http://home.tiscali.nl/developerscorner/css-discuss/images/blackboard-4.png. Greetings, francky btw: other technique for rounded corners, just to compare: liquidcorners http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rounded corners problem on Mac OSX FF
francky wrote: [...] ... or the easy way! http://home.tiscali.nl/developerscorner/css-discuss/test-redcorners.htm :-) francky __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rounded corners problem on Mac OSX FF
From: francky [EMAIL PROTECTED] Hi Dan, I can see the problem in IE6 on Win(98SE) too: screenshot-1 http://home.tiscali.nl/developerscorner/css-discuss/images/blackboard-1.png. and in FF1.07 on pc: screenshot-2 http://home.tiscali.nl/developerscorner/css-discuss/images/blackboard-2.png It is not a white border, but the inside image of the box peeping through, as can be seen by canceling the text_block_middle.gif screenshot-3 http://home.tiscali.nl/developerscorner/css-discuss/images/blackboard-3.png. Seems to be the floating of the inside wrappers (which you don't need): screenshot-4 http://home.tiscali.nl/developerscorner/css-discuss/images/blackboard-4.png. Greetings, francky Hi Francky - thanks for the help and those screenshots, that's great. I managed to reproduce the error here which is always a good start to debugging, and then removed the float:left; on the text_block. I've ironed out a few other problems that crept in but I think now it's working fine. http://www.danwashere.com/dev/aauk/celeb_blackboard/index.html Tell me if it isn't? btw: other technique for rounded corners, just to compare: liquidcorners http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm. Very good - it looks very thorough. I prefer to try to tailor the solution to the problem rather than attempt a jack of all trades myself - but it's all good. Oh, and I've just seen your mail with your example with my graphics :-) very generous of you to spend that time. **Can I ask you though that you replace that text with some Lorem Ipsum? ** I've got myself into trouble using this list with live content before when it got indexed by Google and my test page came up in searches along with the real site URL - the client wasn't happy. Yes, I shouldn't have used live content this time either... but I'll be removing these pages once I'm happy they work. Thanks to the others who commented and/or helped too! Cheers, Dan __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Rounded corners
Hi, I'm trying to get rounded corners working through CSS, I've read lots on the net about how it's possible and have in the past implemented some systems of my own that worked out really well. However, I think what I'm attempting now isn't possible with CSS, or at least not practical if it's to be used many times throughout a site (as in the code would be unwieldy). Basically I'm trying to have an outline border that runs right around a DIV, as well as a curved gradient section at the top. Basically like the boxes on this page: http://plone.org/documentation/tutorial/rounded-corners-in-css/tutorial-all- pages But instead of a solid colour at the top, I want a gradient. Is this possible or practical? Thanks! __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rounded corners
Eoin Maguire wrote: Hi, I'm trying to get rounded corners working through CSS, I've read lots on the net about how it's possible and have in the past implemented some systems of my own that worked out really well. However, I think what I'm attempting now isn't possible with CSS, or at least not practical if it's to be used many times throughout a site (as in the code would be unwieldy). Basically I'm trying to have an outline border that runs right around a DIV, as well as a curved gradient section at the top. Basically like the boxes on this page: http://plone.org/documentation/tutorial/rounded-corners-in-css/tutorial-all- pages But instead of a solid colour at the top, I want a gradient. Is this possible or practical? Thanks! Hi Eoin, I think it is good possible, like allmost everything is possible with css. :-) [1] It is less easy, if the gradient has to scroll over a not unicolor background, but it stays possible (with IE-hacks)! The other question: is it practical? ... Depends on your definition of 'practical' ;-) As far as I know, there are 2 basic methods: 1. put some extra div's in the html 2. let a javascript do that automatically. [2] The first one is not practical, if you don't like to copy/paste a lot (and/or if you want the html to be as clean as possible). [3] The second one is not practical, if you like that visitors with javascript turned off can see the rounded corners as well. Greetings, francky Oh, just saw the spanky-corners, no extra div's and no js; but not giving totally freedom to style the elements inside the box. [1] My corners corner http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm. [2] Somewhere on the Wiki-corner page http://css-discuss.incutio.com/?page=RoundedCorners. [3] If you have only fixed width boxes, it will be less extra. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Rounded corners: cool tutorial
I came across this one and while I'm sure most of you have seen it it's scratching an itch of mine. Works pretty well on my first experiments though I made a slight mistake in my image creation. If anyone has experience with these I'd be interested in hearing. http://www.dragon-labs.com/articles/octopus/#variants Mark __ your personal webtop. @ http://www.goowy.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Rounded Corners
Can anyone suggest some of the better methods out there for learning and creating round corners. I'm really only looking for a link, and while I'm persuing the CSS Front page, still like to know what others think are the better methods. Most important is that they are image free, strictly CSS. Optional would be nice to have drop shadow on the rounded corner boxes. Hope this is an appropriate post. TIA Mark __ your personal webtop. @ http://www.goowy.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rounded Corners
Can anyone suggest some of the better methods out there for learning and creating round corners. I'm really only looking for a link, and while I'm persuing the CSS Front page, still like to know what others think are the better methods. Most important is that they are image free, strictly CSS. Optional would be nice to have drop shadow on the rounded corner boxes. There are a ton of links on the wiki: http://css-discuss.incutio.com/?page=RoundedCorners (I've never even had a chance to go through all of them). As far as imageless and drop shadows, I'm afraid that those will probably either require javascript, browser-specific/unsupported properties, or horrendously ugly markup. Good luck in your search, though! Ricky __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rounded Corners
Ricky Zhou wrote: Can anyone suggest some of the better methods out there for learning and creating round corners. I'm really only looking for a link, and while I'm persuing the CSS Front page, still like to know what others think are the better methods. Most important is that they are image free, strictly CSS. Optional would be nice to have drop shadow on the rounded corner boxes. There are a ton of links on the wiki: http://css-discuss.incutio.com/?page=RoundedCorners (I've never even had a chance to go through all of them). As far as imageless and drop shadows, I'm afraid that those will probably either require javascript, browser-specific/unsupported properties, or horrendously ugly markup. Good luck in your search, though! Ricky Hi Mark, It's a bit confusing, two Mark's asking about Rounded Corners on the same moment! ;-) Why is it so important for you to go image free? - Most web visitors have images turned on; but not always javascript is enabled ... AFAIK, imageless indeed only can be done with javascript (in case you want IE to play rounded corners too). For drop shadows combined with corners, I think images cannot be missed. Perhaps something to use: http://home.tiscali.nl/developerscorner/transparency/transparent-dropshadow.htm For rounded corner solutions (and for borders too, if wanted) with a small img: see the links in my replies to the other Mark! :-) Greetings, francky __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rounded Corners
Mark Fellowes wrote: Most important is that they are image free, strictly CSS. No images, but some extra markup is still needed, I'm afraid... http://www.gunlaug.no/homesite/main_6_xv.html I've left it at a stand-still for nearly two years now, and I'm sorry I haven't got around to ditch the whole thing :-) Optional would be nice to have drop shadow on the rounded corner boxes. It is possible to add shadows and a lot of other extras, but even more markup will be needed if it is to stay image-free. regards Georg -- http://www.gunlaug.no __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Rounded corners and Transparent GIFs
For my next trick, I'll need a div with rounded corners on top of a textured background. Any volunteers from the audience? My launch pad was this ALA article: http://www.alistapart.com/articles/customcorners/ I was skeptical about this being possible at all, but here is my stubborn progress: http://www.twilighted.com/tx/giftest.html The div must be elastic horizontally and vertically. The problem is that the when the corner images overlap, the transparent corners are blocked out, leaving a rectangular corner. Try shrinking the text and watching what happens to the bottom left corner. Here is a shortcut to the ALA article's explanation of how the images are sliced: http://www.alistapart.com/d/customcorners/step1.1.html This would be very easy to arrange with tables, but that would be embarassing. I've been trying to place one horizontal and one veritcal box with white backgrounds behind the main div, but have been so far unsuccessful. Here's a quick mockup: http://www.twilighted.com/tx/theory_example.jpg I just want a nice clean box with rounded, transparent corners. All that I have found so far has been pain! -- Michael Clayton www.twilighted.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rounded corners and Transparent GIFs
See this site for a css + js solution to rounded corners with transparent capability. http://pro.html.it/niftycube/ Jim On 3/23/06, Michael Clayton [EMAIL PROTECTED] wrote: For my next trick, I'll need a div with rounded corners on top of a textured background. Any volunteers from the audience? __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rounded corners and Transparent GIFs
Chris: Thanks, I will investigate that book next time I'm near a book store. Jim: The javascript option is interesting, but I tend to shy away from anything that requires javascript to navigate or display correctly. Just use these methods and skip the images entirely: http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm Your page is badly broken in ff even in it's current form. There are gaps all over the place in your background and no lower right corner rounding. Thanks Don, I think that is exactly what I was looking for. I had seen that site before, but couldn't locate it again. You saved the day. I know the page is broken, though, that's what my post was about. -- Michael Clayton www.twilighted.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rounded corners and Transparent GIFs
For my next trick, I'll need a div with rounded corners on top of a textured background. Any volunteers from the audience? My launch pad was this ALA article: http://www.alistapart.com/articles/customcorners/ I was skeptical about this being possible at all, but here is my stubborn progress: http://www.twilighted.com/tx/giftest.html The div must be elastic horizontally and vertically. The problem is that the when the corner images overlap, the transparent corners are blocked out, leaving a rectangular corner. Try shrinking the text and watching what happens to the bottom left corner. Here is a shortcut to the ALA article's explanation of how the images are sliced: http://www.alistapart.com/d/customcorners/step1.1.html This would be very easy to arrange with tables, but that would be embarassing. I've been trying to place one horizontal and one veritcal box with white backgrounds behind the main div, but have been so far unsuccessful. Here's a quick mockup: http://www.twilighted.com/tx/theory_example.jpg I just want a nice clean box with rounded, transparent corners. All that I have found so far has been pain! -- Michael Clayton Michael: Transparent corners are fine, but it's the background that's the problem. I know you'll say Hey it's transparent!, but I'm talking about the pixels that are the closest to the transparency, which to do it right, should be anti-aliased to *some* background. If you want simple rounded corners, try this: http://www.sperling.com/examples/box/ tedd -- http://sperling.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rounded corners and Transparent GIFs
Michael Clayton wrote: Just use these methods and skip the images entirely: http://home.tiscali.nl/developerscorner/liquidcorners/liquidcorners.htm Thanks Don, I think that is exactly what I was looking for. I had seen that site before, but couldn't locate it again. You saved the day. [...] Hi Michael, I was too late to suggest the same location. ;-) In case you have a div as last part of the rounded corner box (with the ArticleFooter-class), I think you'll need a slightly different end of the box to get not too much vertical white space between the bottom of the div and the bottom of the corner box. You could add a last line paragraph with 1px height to avoid the gap, and then give the ArticleFooter-div some negative margin-bottom. See testpage http://home.tiscali.nl/developerscorner/liquidcorners/twilighted-liquidcorners.htm. Dragons = -1, I hope. Greetings, francky __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rounded Corners - IE
Richard Brown wrote: Hi All I asked Francky on this list for some help and he provided a lot of help with using a rounded corner layout. However, he hit a slight snag with IE. Don't we all! I believe he is currently looking for a solution and I thought I would ask the list for help! The site is at: http://www.lostwithielantiques.co.uk/ Could folks look at the code and maybe offer a suggestion as to why this is not working in IE please? I have also tried a different technique but I cannot get this working either! The site is at: http://www.lostwithielantiques.co.uk/second/ I have created a rounded box that should contain two other boxes. But although I have enclosed the two boxes within the first in the html they don't stay in the said box! Has anybody got any ideas why please? Many thanks. Dennis Bixler wrote: The first site works in FF1.5 and IE6. I didn't check it in anything else. The second site doesn't work. Dennis Bixler Hi Rich, In the meantime, I see, the link to the first site is going to a new page: not the same anymore! With regards to (at this moment) your new page http://www.lostwithielantiques.co.uk/: - This one has no nested round corners as before. - This one is build with a different technique (not the Liquid Round Corners as in my method). And this one doesn't work (yet): - In Firefox, this one has a #sidebar in which the text is going out of the box when enlarging the fontsize. - In Inertnet Explorer, this one doesn't show the corners in the right way. But if you are changing to this new lay-out (without the background of a box with rounded corners, so no nested round corners), IE doesn't have a problem with the Liquid Round Corners method. The not correct IE-performance is coming only in nested corners. When you have a working header / x-column / footer scheme, then the Liquid Corners can be easy implemented. See this new testpage http://home.tiscali.nl/developerscorner/liquidcorners/cregy-corners-example.htm: IE-proof and also font-enlargable in FF. francky ps: I didn't find a solution for the nesting problem of IE, so perhaps this time the IE-bugs are to weird to work around. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rounded Corners - IE
The first site works in FF1.5 and IE6. I didn't check it in anything else. The second site doesn't work. Dennis Bixler -Original Message- From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of Richard Brown Sent: Wednesday, January 18, 2006 2:08 AM To: CSS List Subject: [css-d] Rounded Corners - IE Hi All I asked Francky on this list for some help and he provided a lot of help with using a rounded corner layout. However, he hit a slight snag with IE. Don't we all! I believe he is currently looking for a solution and I thought I would ask the list for help! __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rounded corners
Well I test some tutorials from Incutio and none work for me. I use FF 1.5 and IE 6.0 SP1. I only get two images instead four needed. The images are located well and URL are fine too. I check with TopStyle. So ... I don't know what I'm doing wrong. If any can help me ... King regards ReynierPM Usuario registrado de Linux: 310201 * No basta con alcanzar la sabiduría, es necesario saber utilizarla. -Original Message- From: Christian Heilmann [mailto:[EMAIL PROTECTED] Sent: Thursday, November 24, 2005 1:18 PM To: Reynier Perez Mira Subject: Re: [css-d] Rounded corners It's possible to show a DIV with rounded corners? All of them topleft, topright, bottomleft, bottomright ?? Where I can found a good tutorial or help for do this?? http://www.google.co.uk/search?q=css+rounded+corners http://css-discuss.incutio.com/?page=RoundedCorners for starters __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rounded corners
Dear Reynier Perez Mira Reynier Perez Mira wrote: Well I test some tutorials from Incutio and none work for me. I use FF 1.5 and IE 6.0 SP1. I only get two images instead four needed. The images are located well and URL are fine too. I check with TopStyle. So ... I don't know what I'm doing wrong. If any can help me ... But how? however much I and others might want to help, we've no idea what's wrong in your efforts, as we can only guess what the results of them might be - on your computer :-/ You really have to give us something to work with - that is: code to look on! :-) If you don't have a server space to upload on on regular basis, get one - there's plenty of free ones out there (http://www.free-webhosts.com/). Kind regards Jesper Brunholm __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Rounded corners
It's possible to show a DIV with rounded corners? All of them topleft, topright, bottomleft, bottomright ?? Where I can found a good tutorial or help for do this?? Cheers ReynierPM Usuario registrado de Linux: 310201 * No basta con alcanzar la sabiduría, es necesario saber utilizarla. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Rounded corners
Here is a good article on rounded corners: http://pro.html.it/articoli/id_599/idcat_31/pag_1/pag.html Reynier Perez Mira wrote: It's possible to show a DIV with rounded corners? All of them topleft, topright, bottomleft, bottomright ?? Where I can found a good tutorial or help for do this?? Cheers ReynierPM Usuario registrado de Linux: 310201 * -- Joe Huggins __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
