The right side is adjusting better. It's not a solution I would use, but it is one that allows usability at larger font sizes. The left side, however, is still very problematical.
I think you need to rethink how those boxes are set up. What I would do is make those iconic images with transparent backgrounds and layer them in such a way that they'd "slide" with the height of the box, and be anchored to the bottom. Right now at two clicks increase in Firefox, you're still getting a lot of overlap and squished text.
For instance, on .webdesign_butt a you've got the height set for 121px. You should never have a height set in a box that needs to expand with text size. So get RID of that height. Then get creative in layering images and using borders so that you don't have the problem.
I have a feeling that you're thinking like a PRINT designer. Print designers always have an exact dimension in which they put the contents and design elements. On the web, we don't have that luxury. Every computer, every screen, every default setting in a browser, every resolution, EVERYTHING can affect the way the page will be viewed. There is no such thing as a fixed dimension on the web. So we have to get creative in how we use backgrounds and such so that they will adjust to what our viewers (using their particular combo of monitor, browser, opsys and defaults) throw at them. Think LAYERS.
An article about this concept (but for another use) is here:
A List Apart: Articles: Sliding Doors of CSS
And just to drive you crazy, I'll say it. I miss the red!
