Spanky Corners 1.1 beta

The SitePoint Corners Store


Got a question? Check here to see if it's answered. If not, ask away at the forums. We'll enveavour to get you an answer and add it to this list if necessary.

Spanky Corners FAQ

What are the main advantages?

Spanky corners is a technique that allows you to give your DIV's a rounded finish while maintaining a sensible, low bandwidth XHTML structure, or resorting to JavaScript. The CSS and XHTML both validate.

Are there any issues I need to be aware of?

A few.

  1. The method is fairly flexible, but there is a minimum amount of HTML 'structure' required to implement it. I.E. Having a content box containing a single paragraph is not possible.
  2. IE6 uses ':first-letter' to make the top-left corner. Padding control with IE is pretty limited.
  3. At the moment Spanky makes no attempt to support IE5. In real-world web development, we would advise using condition comments to strip the curves completely in IE5.
  4. The CSS generated by Spanky makes liberal use of universal selectors (*) to keep the CSS flexible, lighter and simpler to read. However, this may not make it easy to 'retro-fit' into existing CSS layouts. Replacing the universal selectors with more specific rules will make this task easier.
  5. Spanky uses a few contortions of CSS (namely it's use of list images) that make controlling margins and padding more challenging than is usually the case in CSS.
  6. Like all new, 'lab-cultured' techniques, integrating Spanky with more complex layouts is bound to sometimes produce unpredictable results.
Can you do rounded boxes with borders?

Technically, yes. We've built a proof of concept, and hope to add that functionality to Spanky 2.0.

Can you do rounded boxes with gradients?

Don't think so.

Can you provide a zipped download to simplify things a bit?

It's currently on the TODO list.

Do I need to be a CSS Guru to use this technique?

With the code generation, hopefully not. Of course, a solid working knowledge of CSS will certainly not go astray.

I get a small gap in my some headers in Internet Explorer.

I know. You can close that gap by making a minor adjustment to the header's line-height in the conditional comments. I've tried to generate the ideal line-height automatically but rounding errors are killing me. ;)

NEW! - March 2006