Question

I need to make buttons and boxes on a web page to meet a client’s design spec. There are lots of buttons and boxes with rounded edges and shadows and such, and unfortunately I have to support old lame browsers.

I’ve seen many ways of dealing with these. Since it will vary in size (height and width of the items must fit the contents), I can’t use a fixed graphic. The approaches I’ve seen are:

1) use a table, with 9 cells. Use a background image on each of the 4 corner and 4 edge cells.

2) use 4 creatively nested divs. Use a single background image, bigger than any of the boxes will be in height and width, using css to position them in the corners. Something like this:

<div class="boxDecorationBL">
 <div class="boxDecorationTL">
  <div class="boxDecorationTR">
  </div>
 </div>
 <div class="boxDecorationBR">
  <div class="content">
  Loren ipsum dolor amet!
  </div>
 </div>
</div>

and then stuff like this in the css:

boxDecorationBL {
background: transparent url(boxdecoration.gif) no-repeat bottom left;
}

Both are ugly in my opinion (I wish I could just use a single div rather than cluttering the markup with that sort of junk), and I’m concerned the latter won’t work right with alpha channel images, since they overlay each other.

Are there other, better, ways that enlightened developers use?

(I have considered solutions such as doing it with css3 — everything I’ve needed can be done without images in that case — and then using javascript to accomodate older browsers by plucking out elements and replacing them with more complex structures, such as one of those above. I like that for the fact that the markup stays cleaner.)

Answer 1

While this is something I’m lucky enough to not have to attempt, as a hobbyist rather than professional¹, it appears that CSS 3 Pie² can enable many CSS 3 effects in Internet Explorer, albeit not without some problems³. It should, however, reduce the inordinate amount of work required to enable the apparently-required cross-browser pixel-perfection.

It’s worth noting that, if you’re able to include CSS3 Pie, it might be worth considering html5shim⁴, to enable the use of html5 elements in your designs and layout.

Similarly, Rahpaël⁵ could be used for any requirement for SVG graphics, but this seems even further outside the scope of your question.

Finally, as an addenda, I’ve heard some good things about Modernizr⁶, which, according to their home page, is:

…a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.

My inclination, however, is as noted in my comment: effect the appearance in the modern browsers (IE9 and 8, so far as possible, Firefox, Chrome, Safari, Opera…) and then make the point that supporting IE <8 requires a lot more work, and greater time.

Make an approximate, and reasonable, quote that would represent the cost in terms of your time, and the cost of that time to your clients/employers. Once you’ve given them the quote, ask if they’re willing to accept the essential cross-browser differences, or whether they’re willing to pay for the additional time.

---

Footnotes:

1. Or possibly unlucky, since I don’t have a job doing something I quite like doing…
2. CSS 3 Pie.
3. Questions tagged with [tag:internet-explorer] and [tag:css3] here on Stack Overflow.
4. html5shim.
5. Rahpaël JS.
6. Modernizr.