Lautaro Arino wrote:
I would like to know the proper CSS way to creating a resizeable rounded corners box that holds content. The rounded corners should be with proper PNG transparency, so it will work with any background.
I have all but switched to pure CSS3 for all of this.
... but if you reallly must support < ie8 then I suggest the method from 456 Berea St. I have modified it to be a JQuery plugin here:
jQuery Function:
(function($) {
$.fn.cbb = function(el){
if($(this).parent().hasClass('.i3')||$(this).parent().parent().hasClass('.i3')){return;}
if($(this).parent().is('a')){var root=$(this).parent();}
else{var root=$(this);}
root.wrap('<div class="cb" />').wrap('<div class="i1" />').wrap('<div class="i2" />').wrap('<div class="i3" />');
$(this).closest('div.i1').after('<div class="bb"><div></div></div>')
$(this).closest('div.i1').before('<div class="bt"><div></div></div>')
$(this).closest('.cb').width($(this).width()+36);
};
})(jQuery);
jQuery Call:
My CSS:
.cbb{margin:.25em 0;padding:0 .25em;border:1px solid #666;background:#fff;}
.cbb h1{margin:0 -10px;padding:0.3em 10px;background:#efece6;font:bold 1.2em/1 Arial, Helvetica, sans-serif;}
.cbb .Normal{display:block;}
.cb .Normal{display:block;}
.cb{margin:0.25em;text-align:center;}
.bt{height:14px;margin:0 0 0 15px;background:url(/portals/0/images/box.png) no-repeat 100% 0;}
.bt div{position:relative;float:left;left:-15px;width:15px;height:14px;background:url(/portals/0/images/box.png) no-repeat 0 0;font-size:0;line-height:0;}
.bb{height:14px;margin:0 0 0 12px;background:url(/portals/0/images/box.png) no-repeat 100% 100%;}
.bb div{position:relative;float:left;left:-12px;width:12px;height:14px;background:url(/portals/0/images/box.png) no-repeat 0 100%;font-size:0;line-height:0;}
.i1{padding:0 0 0 12px;background:url(/portals/0/images/borders.png) repeat-y 0 0;}
.i2{padding:0 12px 0 0;background:url(/portals/0/images/borders.png) repeat-y 100% 0;}
.i3{margin:0;padding:1px 5px;background:#fff;display:block;}
.i3:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
You can get the supporting files from the link above which also teaches you how to create your own borders. Use a condintional style sheet to replace the image with a clean gif for ie6 or play with
PNG fix.