Can't find CSS Rule for Center of Page Margins

[gjh42]

Yikes! That's pretty drastic.
I have supper on the stove, but I'll come back in a few minutes and take a closer look.

[gjh42]

Ok, your problem is not any one element by itself, but two interfering elements.

The logo image is somehow taller than #logoWrapper, and #contentMainWrapper "caught" on it and would not slide left as it should.

Not sure yet where to change that, but that is what to look for.

[ssolis5788]

But I don't understand that; my logo is 203px tall, so I've made the height in the #logoWrapper 205px. Shouldn't that have fixed the problem?

[gjh42]

Somewhere your logo is being defined as something like 300px wide x 283px high.

Add
#logo img (height: 203px;}
to your stylesheet and see what happens. This is just a workaround; it would be better if you found the source of the incorrect definition.
View source will show you the exact dimensions being specified for the logo, and the Web Developer Information > Display Element Information tool will show you the outlines of each element as well as exact size & position on screen (click to see full details).

[ssolis5788]

Ah Ha! It was the logo.gif image that was 300x283. I resized it in Photoshop to be 216x203 and that corrected the problem of everything being shoved right.

Now I've got to figure out how to move the right sideboxes over to the left some - they are hanging off the page (only in Firefox though).

And I've still got the problem of the text in the center of the page hanging off the left and right side vertical bars. When I use the "View Style Information" in Web Developer, and place the mouse over the text (for example, under "Shipping & Returns", the text on that page), it says "No Style Information". Is this because that text is generated in the Admin>Tools>Define Pages Editor?

[gjh42]

The sideboxes fit the rest of the page fine for me (FF, 1024x768). The whole page does expand a little (~15px) beyond the screen, though, forcing a scrollbar. Something is making it total a bit more than 100% of the screen width. It's the same fluid 100% + 15px no matter what the window size.

The vertical lines really have nothing to do with the center column or sidebars - they are a fixed 750px or so apart, and I could imagine a 1280px wide screen making it look like they were supposed to be dividers. You need to find the background image that is producing those lines and modify or eliminate it, and then if you want borders there, add them in the stylesheet so they move with the page width.

[kuroi]

I have the impression that the site has evolved somewhat during the course of this thread. However, the fundamental issue at this point seems to me that the template is designed as a fixed width layout, but you are using it on a liquid site.

The lines, and further out the drop shadow, are designed to appear in particular places on the page, but in a liquid layout your content which is supposed to sit over them, is no longer where the template expects it to be.

Switching from Gold to Red Passion will make no difference - they're the same template with a different set of images but the same basic design limitations.

[ssolis5788]

Thanks Kuroi & Glenn.

How hard would it be to take the Bare Bones template, and make it look like what I have made the Red Passion template look like? I don't care about the gray background, or those vertical lines in the center. I didn't realize making the template 100% width would cause problems.