css height problem/possible jquery fix??

[ohbabyjane]

I've been looking at the faq, the wiki, and all over the forums for hours, and I cannot get this to work, so I'm hoping someone will be kind enough to help me.

I wanted to make a scalloped border around the main content on my page (not the header and footer). You can see what I mean here: www.peepaccessories.com/peepaccessories
I added the top and bottom part of the border as images directly in the tpl_main_page file, and then I made an image of one scallop and set is as the background image in css on #contentMainWrapper and #navColumnOne. I don't know if this was the best way to do it, but it worked.
The problem is, the image file for the scallop is 36px high. I want the content box to always be a multiple of 36px high so that the sides and the bottom match up nicely (you can see on the page I linked to that they don't). Of course, I can set the height in css to any multiple of 36 (like 360) and the scallops all match up perfectly, but it obviously doesn't work if the content stretches the box to over that amount of pixels.
I've searched all over for a css fix, but I can't find one. If you have any ideas about that, I'd love to hear them!

I found, instead, a jquery script here: http://www.justjquery.com/2008/11/27...-in-multiples/
Does anyone who knows java/jquery at all think this looks right? Would it make sense to put #contentMainWrapper where #page is in the sample script?

And if this script looks like it's written correctly, how in the world do I make it work sitewide on my zc?? I've tried making a js file in a jscript folder in my templates folder, I've tried putting something into the html_header, into tpl_main_page. I've tried all three, one at a time, different combinations, and nothing. As I said, I've read and reread the faq, the wiki, and countless other user questions on the forums, and I've tried all the suggestions over and over but there must be something I'm missing. If anyone can kindly help me with this problem, I would be forever grateful, whether it's a fix on css or through this script I found.
Or if you could just tell me that it's completely impossible and I'm wasting my time, that would be fine, too. :)

Thanks in advance!

[rstevenson]

The problem is, the image file for the scallop is 36px high. I want the content box to always be a multiple of 36px high so that the sides and the bottom match up nicely (you can see on the page I linked to that they don't).

I can't help with the jquery possibility, but I wanted to let you know that the images line up perfectly in your sample -- for me, in my browser, at my screen resolution. But if I use the command-+ or command-- (that's a minus sign) to raise or lower the font size, I can see the misalignment.

In other words, pixels aren't going to work for everyone, because different OS/hardware/resolution capabilities and prefs will override it. You'll never be able to reliably align a fixed graphic like that.

If I were me, I'd use a different graphic for the sides, a linear one that could stretch to any size without a problem at the bottom.

Rob

[ohbabyjane]

Thanks for responding, Rob.
I was playing around with it since I posted this on Saturday, and actually ended up adding a minimum height to the stylesheet of 360px as a temporary fix while I'm working on it, which is why they're currently lining up (with no content on the pages to stretch the box out, of course).
I know what you're saying about using a different kind of image, but then the whole scalloped edge thing wouldn't exactly work, and I don't really want to give up on that look yet. :)