Curved-Corner-Boxes.com Application Updates

6/22/09 - A New Curved Corners Copy/Paste Code Base was Installed. Program is given version 2.0

On the date listed above changes were made to the 'Copy/Paste code template' used by this website. Here's a quick explanation of 'Copy/Paste code template':
After using the online Curved Corners Box graphic design program to interactively design the style of their Curved Box and its html contents, the user will PASTE THE COPY/PASTE CODE generated by the application INTO THEIR WEBSITE PAGE and a Curved Box 'skin' would appear around say a YouTube video and some links.
The Copy/Paste code 'implements' a Curved Box graphical 'skin' around the users html code using a lightweight html wrapper and automatically generated css classes and styles.
 
The new Copy/Paste code 'template' produces VIRTUALLY UNBREAKABLE CURVED BOXES that will stay in one piece and continue looking right ON A WIDE RANGE OF OLD AND NEW BROWSERS and all popular doctypes. Scroll a little ways down this page for an example of what the new code looks like, some notes on the new code, and the details of the cross browser compatibility tests that were done on it.

General Advantages of the New Curved Corners Copy/Paste Code 'Template'

1)
It has LIGHTER OUTPUT CODE with less cruft in the html code.
2)
Code will now support TEXT OR A LINK WITHIN THE TOP OR BOTTOM CURVED PART of the box. The whole top or bottom of the curved box can become an active link.
3)
The addition of the h3 tags within the curved box top and bottom make the box more SEO FRIENDLY
4)
The new html + css curved corners code produces VIRTUALLY UNBREAKABLE CURVED BOXES that will stay in one piece and continue looking right ON A WIDE RANGE OF OLD AND NEW BROWSERS. It can withstand extreme font size changes without breaking and is unaffected by 'generic css resets' your css coder might have done elsewhere.
5)
It has NO IMAGE tags in the html and uses NO HTML TABLES. It contains NO CSS FLOATS and thereby avoids the cross browser compatibility problems with floats. It works with HTML and XHTML DOCTYPES and does not even 'break' with IE in 'quirks mode'. It requires NO CSS HACKS like the '* html' hack but works on both IE5 and all the latest browsers. Because of no css hacks, the css code produced PASSES XHTML VALIDATION.
6)
The curved box can be 'FIXED WIDTH', 'FLUID WIDTH', or 'ELASTIC WIDTH'. The box is just as unbreakable in all those configurations.
7)
The curved box CAN HANDLE ANY AND ALL HTML AS IT'S CONTENTS without breaking just as long as it is well formed. The well known 'fixmargin' css fix for margin problems is included at the beginning and end of the contents section in the html code. The amount of html code that the user can put in the 'contents' section of the curved box is unlimited. Server code can be put in the 'contents' section after pasting in the target page to retrieve a variable amount of html code from a db and the height of the curved box will increase with more html returned.

The New Copy/Paste output code will look something like this:

<!--CODE GENERATED BY [HTTP://CURVED-CORNER-BOXES.COM][06-25-2009 8:04:29pm][BOX-ID:ccb090625-80429pm]-->
<!--For the [HTML 4 TRANSITIONAL] DOCTYPE with separatable CSS Classes-->
<style type="text/css">
#ccb090625-80429pm { clear:both;margin:0px 10px;padding:0;background-image:url(http://curved-corner-boxes.com/curved/pubimages/background/cedar3D-7.gif); }
#ccb090625-80429pm .ccbtop, #ccb090625-80429pm .ccbtop b, #ccb090625-80429pm .ccbtop h3, #ccb090625-80429pm .ccbtop a, #ccb090625-80429pm .ccbbot, #ccb090625-80429pm .ccbbot b, #ccb090625-80429pm .ccbbot h3, #ccb090625-80429pm .ccbbot a, #ccb090625-80429pm .ccbmid .fixmargin { height:14px;display:block;overflow:hidden;margin:0;padding:0;font-size:1%;line-height:1px; }
#ccb090625-80429pm .ccbtop b, #ccb090625-80429pm .ccbbot b { height:1px;background-color:#555; }
#ccb090625-80429pm .ccbtop h3 { margin-top:-1px;background:transparent url(http://curved-corner-boxes.com/curved/pubimages/corners/ctl1-ffffff.gif) no-repeat; }
#ccb090625-80429pm .ccbtop a { padding:0 15px;font-size:14px;line-height:1em;background:transparent url(http://curved-corner-boxes.com/curved/pubimages/corners/ctr1-ffffff.gif) no-repeat scroll top right; }
#ccb090625-80429pm .ccbmid { clear:both;margin:0;padding:0 9px;border-left:1px #555 solid;border-right:1px #555 solid; }
#ccb090625-80429pm .ccbmid .fixmargin { height:1px;clear:both; }
#ccb090625-80429pm #ccb090625-80429pm-conts { clear:both;margin:0;text-align:left;background-color:inherit;font-size:20px;color:black;font-weight:normal;font-family:Verdana, Arial, Helvetica, sans-serif;font-style:normal;line-height:115%;white-space:normal;border:none;margin:0;padding:0px 16px; }
#ccb090625-80429pm .ccbbot b { margin-top:13px; }
#ccb090625-80429pm .ccbbot h3 { margin-top:-14px;background:transparent url(http://curved-corner-boxes.com/curved/pubimages/corners/cbl1-ffffff.gif) no-repeat scroll bottom left; }
#ccb090625-80429pm .ccbbot a { padding:0 15px;font-size:12px;line-height:1em;background:transparent url(http://curved-corner-boxes.com/curved/pubimages/corners/cbr1-ffffff.gif) no-repeat scroll top right;}
a.ccbsign { color:black;font-size:1em;text-decoration:none; } a.ccbsign b { color:blue;padding:0 3px;border-bottom:3px #090 solid; } a.ccbsign:hover { border-bottom:2px blue dashed; }
</style>
<div class="Curved-Corner-Boxes.com" id="ccb090625-80429pm">
<div class="ccbtop"><b></b><h3><a></a></h3></div>
<div class="ccbmid"><div id="ccb090625-80429pm-conts"><div class="fixmargin"></div>

<div class="fixmargin"></div></div></div>
<div class="ccbbot"><b></b><h3><a></a></h3></div>
</div>
<!--Place link below somewhere in your web page-->
<a href="http://curved-corner-boxes.com/" class="ccbsign">Curved HTML Skins by <b>Curved-Corner-Boxes.com</b></a>
<!--[END CODE] GENERATED BY [HTTP://CURVED-CORNER-BOXES.COM]-->

Notes regarding the new Copy/Paste code

Copy/Paste code for the HTML STRICT, XHTML LOOSE, and XHTML STRICT DOCTYPES can also be produced by this application in addition to the code for the HTML TRANSITIONAL DOCTYPE shown above.
The blank line in the middle of that code is where your HTML code to be 'skinned' would be. Normally the Copy/Paste code would have automatically included your html code in that location but it has been removed to simplify this explanation.
Cut and paste the <style> ... </style> section into an external style sheet after Copy/Pasting all the code into your web page body section.
A unique id="??" based on the date/time down to the second is generated for each new curved corners box generated by the user. This helps keep curved boxes used in a web page from being 'broken' by css styles that the page designer may have set on 'generic' html items like div's, h3's, etc. It also means that you can have multiple curved corners boxes in the same web page each with a different style and they do not 'break' each other.
A unique id="??" is also generated for the contents area tag of the box to make it 'css strong' as well. It is the same as the box id="??" tag with the addition of '-conts' extension.
The top part of the box is painted by the line:
<div class="ccbtop"><b></b><h3><a></a></h3></div>
The <b></b> part of that paints the top border.
The <h3> paints the top left corner and the <a> paints the top right corner.
If you put text between the <a></a>, that text will appear in the top of the curved box. If you add a href= to the <a> then the entire top of the box will be a clickable link. It would look like this:
<div class="ccbtop"><b></b><h3><a href="http://youtube.com">YouTube</a></h3></div>.
The bottom part of the box is painted using similar techniques as the top.
The middle part of the box looks something like this:
<div class="ccbmid"><div id="ccb090513-15823pm-conts"><div class="fixmargin"></div>

<div class="fixmargin"></div></div></div>
The blank line in the middle of that is where your HTML contents to be 'skinned' would go. The outer div with class "ccbmid" paints the left and right borders of the box and other style options. The div with the id="ccb090625-80429pm-conts" tag wraps your actual HTML contents and applies text styles and border styles to the contents area. The 2 div's with the "fixmargin" class are a well known fix for IE problems caused by using html items with a 'margin' attribute(a hasLayOut issue).

CROSS BROWSER COMPATIBILITY TESTS for the New Curved Box Copy/Paste Code 'Template'

Both the online Curved Corners Box graphic design program and the output Copy/Paste code that the user will actually paste into their web page were tested. THE TEST BROWSERS USED WERE:
Internet Explorer 5+
Firefox 3+
Google Chrome 1
Safari 4
Opera 9.64
The online Curved Corners Box graphic design program works on all test browsers
The Copy/Paste output code of this system WORKS NEARLY FLAWLESSLY on all test browsers/doctypes. The Curved Cornered Boxes can even survive the user resizing the browser text by extreme amounts with no gaps or irregularities appearing on all browsers. The only problem found was with browsers that have actual 'zoom' capabilities like ff3. As you zoom in or out, some small visual artifacts can appear, then disappear, then reappear. If you put Firefox into 'zoom text only' mode, then no artifacts will appear when you zoom. Therefore I have concluded that the artifacts are caused by some rounding off irregularities caused by the Curved Cornered Box actually being made up of subparts which the browser is trying to 'zoom' individually.
DOCTYPES TESTED:
HTML Loose, HTML strict, XHTML Loose, XHTML Strict, 'QUIRKS MODE'. The curved corners Copy/Paste code SURVIVED BEING PUT IN WEB PAGES WITH ALL DOCTYPES LISTED WITHOUT 'BREAKING'. The code also survived being put in a web page where 'QUIRKS MODE' was intentionally triggered and was viewed under all Internet Explorers. No artifacts or gaps appeared.
Copy/Paste Code TESTED BY CODE VALIDATORS:
HTML - http://validator.w3.org
CSS - http://jigsaw.w3.org/css-validator
The output Curved Corners Copy/Paste code was pasted within pages set up for the each of the Doctypes listed in the preceding paragraph. They were then run through the the w3.org validators for CSS and HTML and passed.
The curved box can be 'FIXED WIDTH' or 'FLUID WIDTH' and was tested and works on all browsers listed above. Also, by making a simple hack on the output COPY/PASTE code you can make the curved box of 'ELASTIC WIDTH'. Just add the style 'width:??em;' to the css styles of the outermost div, the one with the id="??". 'Elastic width' curved boxes were tested on all browsers listed above and no 'breakage' was observed.
HTML CONTENTS TESTED: image tags, html forms, object tags, video object tags, script tags, html links, div's, span's, ul, inline style attributes, input fields, select controls, radio buttons, nested html tags, etc. The curved box can handle practically any html as its contents without error. It can handle large amounts of html and even 'skin' the entire inside of the html <body>. Streaming video object tags like YouTube.com can play inside the curved box with no problems. The included 'fixmargin' css class keeps margin settings inside the contents from 'breaking' the box.
There are basically 2 areas in which you can get into trouble with your html contents you put in your curved box. The first is using invalid html, especially if you left off a closing tag in your html. The results of that can be that the browser thinks one of my tags actually closes your tag and the curved box can be spectacularly broken. The other area in which you can go wrong with your html contents is if part of the contents is wider than whatever width you have the box set at. Sometimes it may not be obvious that this is the case because it may just be a few pixels short. You can have this happen with a curved box because you have a picture in it that is a little too big or maybe it has a little too much padding around it. You can have it happen with text within the box too, especially if the user increases the size of the text, or if you have a long unbroken piece of text like a url.
When the curved box breaks because of something within it being wider than the box width, only the right side of the box will look broken. This problem is in fact not a curved corners box error but a standard 'browser feature' that has to do with what the browser should do if an html item is bigger than the html container in which it is in. Web 'standards' says that the default behavior should be that the browser lets the bigger inside item 'hang over' the left edge of the outside container. All browsers basically will do that and the upshot is that the curved corners box will be mangled on the right side. The only solutions are to either adjust the contents of the Curved Box to make them thinner or to set the Curved Corners Box itself to a greater width.