@Kepler (and all) I use the same technique (slightly different markup which doesn't make any difference) that you posted, and after reading this thread, I will try to write an article about this method to illustrate with examples, on a blog where I collaborate.
Some advantages: - it's flexible - just one image (http://www.exaudi.com.ar/images/corners-r8-white.gif, which can include different rounded corners) - you can use borders on the box (remember to add borders to the rounded corners on the image). - the added extra mark-up isn't too "invasive". It doesn't "take physical space", nor it isn't wrapping the real content, making it pretty "agnostic". That is, if you decide to remove this extra markup, the content should still look pretty fine, (but without rounded corners, of course). - if you prefer to apply it as a progressive visual enhancement, you can easily prepend this extra markup with JS Disvantages: - nobody likes to have empty elements in their HTML. That's why I prefer to add the extra mark-up using JS. So, here is the HTML and CSS (and optionally, the JS, using jQuery, in this case) /* HTML */ <div class="message"> <span class="tl"><!-- rounded corners --></span> <span class="tr"><!-- rounded corners --></span> <span class="br"><!-- rounded corners --></span> <span class="bl"><!-- rounded corners --></span> <p>Your content here...</p> <p>Your content here...</p> </div> /* CSS */ .message { background-color: #fff9d7; padding: 15px; position: relative; height: 100%; /* IE6/7 bug fix on rendering absolute positioned elements */ width: 578px; border: 1px solid #ded078; } /* rounded corners */ .message span.tl, .message span.tr, .message span.br, .message span.bl { display: block; height: 9px; width: 9px; position: absolute; background: #fff9d7 url(/images/corners-r8-white.gif) no-repeat 0 0; } .message span.tl { top: -1px; left: -1px; background-position: -9px -9px } .message span.tr { top: -1px; right: -1px; background-position: 0 -9px } .message span.br { bottom: -1px; right: -1px; background-position: 0 0; } .message span.bl { bottom: -1px; left: -1px; background-position: -9px 0; } /* JS (jQuery, optional) */ /* radd extra mark-up for ounded corners for messages */ $('.message').prepend('<span class="tl"><!-- rounded corners --></span><span class="tr"><!-- rounded corners --></span><span class="br"><!-- rounded corners --></span><span class="bl"><!-- rounded corners --></span>'); 2008/5/22 Kepler Gelotte <[EMAIL PROTECTED]>: > > I need my rounded box to be resizable, and kind of like the idea > > of using only one small circle image that gets offset for each corner. > > Prefer no javascript for this. > > Hi Chris, > > I created an example page using a single gif image and no javascript. You > can see the page here: http://www.neighborwebmaster.com/tests/balloon.html > > Best regards, > > Kepler Gelotte > Neighbor Webmaster, Inc. > 156 Normandy Dr., Piscataway, NJ 08854 > www.neighborwebmaster.com > phone/fax: (732) 302-0904 > > > ______________________________________________________________________ > 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/
