Can't find CSS Rule for Center of Page Margins

Hello all,

I've been modifying the Golden Passion template, and can't seem to find the area to change the margins for the center of the page. Here is the URL:

http://www.example.com/store/index.php?main_page=shippinginfo

I'd like everything to fit within the vertical bars on either side. Can some please point me in the right direction? Thanks!

Um, we need a real (accessible) URL. Is that one on your local development server? If so, you will have to describe better what is happening and what you want to happen. A screenshot would help some, too.

Hi Glenn,

Yes, this is my development site (local). I've attached a screenshot of one of the pages that shows the left side overlap. Thanks.

Well, through much trial and error, I've managed to adjust the left margin for the breadcrumbs, product image, and the page title. But I still don't seem to be able to move the body text over. Any help is very much appreciated!

Can someone help me? I've been searching (with no luck) a way to modify the margins for the center of page text. Thanks.

Do you have Firefox and its Web Developer extension? Those are the tools that will let you quickly find the exact element to adjust margins on in your stylesheet.
They are what we would use to probably solve your problem in a couple of minutes if we could see your site directly, but the Web Developer is an indispensible tool that you should have in any case.

Hi Glenn,

I downloaded Firefox and the Web Developer. When I view my local site in Firefox, the left sideboxes have shifted to the right of the vertical line (you can see the lines in the screenshot in previous post). How do I move this back in place - and by doing so in Firefox, will it screw things up in IE?

Thanks,

I just can't say that without actually seeing it live. Does the problem change if you resize the page?
Your stylesheet might give a clue I could use. If you post it, be sure to use code tags.

Also, you mentioned that it was the Golden Passion template.
Have you asked the template maker? Or posted in the support thread for it?

gjh42:

I just can't say that without actually seeing it live. Does the problem change if you resize the page?
Your stylesheet might give a clue I could use. If you post it, be sure to use code tags.

I've gone ahead and made the template switch on my live site. You can see this at the url below.

gjh42:

Also, you mentioned that it was the Golden Passion template.
Have you asked the template maker? Or posted in the support thread for it?

I tried to find the template maker's name ID but couldn't. Also I just saw a post by Kuroi that said the Golden Passion template wasn't fully functional for 1.3.7. Instead, I downloaded the Red Passion template, and exchanged a few images to make it look like the other.

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.

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.

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?

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).

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?

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.

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.

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.