stylesheet tweeks not having desired effects.

[humbll]

There is the matter of the category box header image, the lower part of it is being cut off from the sidebox content area. The bottom is supposed to resemble the top, with a highlighted border area around it. How would I adjust this, if I so choose?

Also, when I switched my resolution down to the lowest setting, it clips off part of my header image, and i have to scroll over to the right to see all info. I tried changing the lines in the stylesheet from this:

#mainWrapper {
background-color: #ffffff;
text-align: left;
width: 960px;
vertical-align: top;
}

to this:

#mainWrapper {
background-color: #ffffff;
text-align: left;
width: 100%;
vertical-align: top;
}

But what ends up happening is that the header image gets clipped somhow, and the shop then looses its neat appearance. Is there a way to make it look good in all resolutions? Thanks for the help!

[gjh42]

You have a single image for the logo... how did you expect it to not get clipped when the window is sized down?
Your logo is actually quite practical to make fluid width. It has left and right detail sections and a center text section. What you need to do is split it into three pieces, and attach one to the left edge of #headerWrapper, one to the right edge of #logoWrapper, and one centered in #logo.

Give each of the edge images extra "middle" - stretch the plain area out, especially the left (first) one.
Adjust so that when they are overlapped at say 800px width, the right doesn't cover detail of the left, and when stretched to as wide as you ever want to allow, there is no gap.
Make the text a gif with transparent background and the words a bit off center in it, so the gif can be centered and let the text be where it should be.

[humbll]

Thanks for the advice, i will make the adjustments you recommend. I just thought that perhaps there would be a way to programatically tell the browser: "if the resolution is only 800 px then shrink the image to 800px also" instead of only displaying the 1st 800px of the image.

Thank you for taking the time to explain it to me...