Re: [css-d] CSS redesign: criticisms, comments and similar are welcome
Hi, you've done a great job. It works also well with IE6 and above (I tested it with IE tester). Perhaps you could continue the blogspot as the English version and link to it from your Italian website? Florian Hamberger -- E-Mail: florian.hamber...@fhcb.net Internet: www.fhcb.net Hi folks, I've recently launched a massive redesign of my Blogspot blog. Now it's much more CSS3 compliant than before. http://onwebdev.blogspot.com/ Now I've also have an Italian official website that's going very well. Honestly, do you think that I should create an /en section there or stick to Blogspot (which is also going very well)? http://gabrieleromanato.com Any suggestion to improve the layout? Any CSS3 trick that I should try? Let me know. ps. Oh yes, IE: honestly I work on a Mac and I test on IE only when clients ask me to do so Bye Gabriele http://www.css-zibaldone.com http://gabrieleromanato.com http://www.css-zibaldone.com/test/ (English) http://www.css-zibaldone.com/articles/ (English) http://onwebdev.blogspot.com/ (English) __ 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/ __ 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/
[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] CSS redesign: criticisms, comments and similar are welcome
I just looked at it from an aesthetics standpoint, and I really like it. I would definitely put the social buttons in their natural colors though. -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Gabriele Romanato Sent: Thursday, February 09, 2012 12:58 AM To: css-discuss Subject: [css-d] CSS redesign: criticisms, comments and similar are welcome Hi folks, I've recently launched a massive redesign of my Blogspot blog. Now it's much more CSS3 compliant than before. http://onwebdev.blogspot.com/ Now I've also have an Italian official website that's going very well. Honestly, do you think that I should create an /en section there or stick to Blogspot (which is also going very well)? http://gabrieleromanato.com Any suggestion to improve the layout? Any CSS3 trick that I should try? Let me know. ps. Oh yes, IE: honestly I work on a Mac and I test on IE only when clients ask me to do so Bye Gabriele http://www.css-zibaldone.com http://gabrieleromanato.com http://www.css-zibaldone.com/test/ (English) http://www.css-zibaldone.com/articles/ (English) http://onwebdev.blogspot.com/ (English) __ 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/ __ 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] CSS redesign: criticisms, comments and similar are welcome
On 2012/02/09 06:57 (GMT+0100) Gabriele Romanato composed: I've recently launched a massive redesign of my Blogspot blog. Now it's much more CSS3 compliant than before. http://onwebdev.blogspot.com/ I'm rather unimpressed by 6-7 word long paragraph lines: http://fm.no-ip.com/SS/onwebdev01.jpg Now I've also have an Italian official website that's going very well. Honestly, do you think that I should create an /en section there or stick to Blogspot (which is also going very well)? http://gabrieleromanato.com If the English speaking world is part of your desired audience, of course! Any suggestion to improve the layout? Any CSS3 trick that I should try? Gray text is uncool, as is paragraph text 56.25% of actual default size. Needs some work to prevent text overflow cutoff/hide in those small spaces (Twee; Ob). Other than that, I like monochromatic. -- The wise are known for their understanding, and pleasant words are persuasive. Proverbs 16:21 (New Living Translation) Team OS/2 ** Reg. Linux User #211409 ** a11y rocks! Felix Miata *** http://fm.no-ip.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] CSS redesign: criticisms, comments and similar are welcome
On Thu, Feb 9, 2012 at 12:57 AM, Gabriele Romanato gabriele.roman...@gmail.com wrote: Hi folks, I've recently launched a massive redesign of my Blogspot blog. Now it's much more CSS3 compliant than before. http://onwebdev.blogspot.com/ Gabriele --- Yeah. Guess its alright -- providing that the user has not altered any of her out-of-the-box browser preferences; and, it is probably impossible to correct the zillions of markup errors on some of those pages considering the blogging software you are using. Bells and whistles come and go. But every castle -- even one that is built in the air --needs a rock-solid foundation... Best, Bono 4 U2 -- Chelsea Creek Studio http://ccstudi.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] CSS redesign: criticisms, comments and similar are welcome
I've been a fan of Romanato site for a long time. Imagination ideas and ambition trump staid perfection any day. -- /* Colin (Sandy) Pittendrigh --oO0 Have code will travel */ __ 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/
