I’ve got a block in my page design that I’ve setup border images for, but I don’t like how bulky the markup looks, so I’m wondering if there’s a better way. Here’s sort of what I’m doing:
<div id="box">[INDENT]<span id="box-top"></span>[/INDENT] <span id="box-left"></span> <span id="box-right"></span> <span id="box-bottom"></span> <span id="box-content">Hiya.</span> </div>
…then in the CSS I’ve got all the spans positioned absolutely with the associated background-images and so forth, as you’d expect. It works but it just sort of smells like I’m hacking something together. It reminds me a lot of the way I used to carve out tables with all these little broken-up images in the cells in order to get a nice graphical border around a text area.
Maybe this is just what you have to do if this effect is what you want, but I thought I’d ask, is there a better way?