[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. > Hi Dino, That is true, mostly it is done by an image with a colored inside, and mostly the solutions don't support tranparency. But the are some methods which use transparency in the image: then the outside of the corners mis transparent, so it is possible to scroll over a background image. And by inverting what is transparent (outside now painted in the page background color, and inside made transparent) you'll get a corner box with transparent inside. More about this below, first your questions.
> 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? > > This is because of the definition of the margins somewhere in the stylesheet. It can be suppressed by adding a class: .noTopgap { margin-top: 0 !important; } to the stylesheet, and giving that class to the first ".xboxcontent" element in the #nifty container. >2. how do you get right float to line up with the top of left box ... > That can be done by putting the floating element (side box) html before the regular box (in this case the #nifty) html, and giving a "clear: right;" later on for the next floating element. Alternative: floating the #nifty box too: { float: left;}. Reason (summary): a browser has to determine first which area of the float has to be rendered, the remaining space then can be filled with the following code in the "normal flow". See the w3c css-specs [1] >... and to show rounded corners ? > >thx, >dino > I think for an inside colored box you need a bit different kind of Nifty Styles. If you fill the #right box with the light green color, then the outside of the corners will be not transparent, but also light green... This cannot be done therefore. For instance in the secone 1px height "row" line of the Nifty Corners now you have to see 3 colors: on the outside the color op the page background, then 1px color of the corner/border, then the light green for the inside. Enlarged, try: <div style="width: 50%; border: 1px solid #c0c0c0;"> <div style="height: 10px; background:red; margin: 0 40px;"><!-- --></div> <div style="height: 10px; background:#E5FFC4; margin: 0 20px; border-left: 20px solid red; border-right: 20px solid red;"><!-- --></div> <div style="height: 10px; background:#E5FFC4; margin: 0 10px; border-left: 10px solid red; border-right: 10px solid red;"><!-- --></div> </div> In this way the corner can be build with several lines (while you can see what you are doing! ;-) ); if it is good looking, you can divide everything by 10 to get the 1px corner. Afterwards you asign a clas to each of these div's, of course. And for the bottom corners: place the classes just in the upside down order. Then you have to make a #content or a .content div for the stuff inside: this can get the lightgreen background. Because it is between the top and border corners, it now cannot influence the "transparency" of the corners. Alternative: use the transparent image method, then you only have to set the new background color. Some other notes: * In the nifty borders there is 1px missing <http://home.tiscali.nl/developerscorner/css-discuss/images/nifty-missing.gif>. * In IE, the left sidebar has a very small font-size. * The css-validator has some hints (apart form the "inline-block" warning; I think that can be ignored.) With an example of transparent "image driven" rounded corner boxes: here is a testpage <http://home.tiscali.nl/developerscorner/css-discuss/test-css_test11.htm>. Succes! francky [1] http://www.w3.org/TR/CSS21/visuren.html#floats ______________________________________________________________________ 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/
