Transparent custom corners and borders, version 2
The changes, then:
- The default CSS now auto-clears contained floats.
The end result is that you can now plug the script in without worrying about conflicts with other scripts.
- It is now possible to attach the script to any element type, not just
divelements. Be aware that this could invalidate your markup. The script wraps the elements it finds in a
divelement, so if you attach it to, say, an
aelement inside a
pelement, the rendered HTML will be invalid (though W3C’s HTML Validator won’t notice since it doesn’t execute the script). To stay valid, only attach this script to elements that are allowed to have a
divelement as their immediate ancestor based on their location in the DOM, such as
- If the element the script is attached to has an
idattribute, the attribute and its value is moved to the containing
- There should be no problems floating customised elements.
- Nesting elements, floated or not, works fine except for in iCab, which lets contained floated boxes escape.
- The default CSS contains a fix for IE whitespace issues that would appear under certain circumstances.
The TCCB v2 demo page contains several different examples, including one that shows how this technique can be used to create buttons with rounded corners and drop shadows with alpha transparency.
This technique works well in fully CSS-capable browsers, but there is one issue in Internet Explorer for Windows that I haven’t been able to find a perfect solution for. If you float or absolutely position a customised box, its width will not shrinkwrap to the width of its contents. All other browsers do that, but IE (including IE7) needs a specified width. That may be fine in some cases, but it can be very handy to let a float shrinkwrap. The demo page contains examples of both floated and absolutely positioned boxes, so check it out to see what I mean. If you can come up with a better workaround, please let me know.
The steps to use this technique are the same as in the previous version, so take a look at the original Transparent custom corners and borders article for the details. The basic idea is to first add the class name
cbb to the elements you want to style:
<div class="cbb"> Box content </div> <ul class="cbb"> <li>List item 1</li> </ul>
Finally copy and adjust the CSS from the TCCB v2 demo page.
- Previous post: CSS Frames v2, full-height
- Next post: Font size inconsistencies with font-family: monospace