Some alignment and margin issues

[zingslings]

I've played with just about everything in the stylesheet.css that I can think of but it's just not helping.

The site is www.zingslings.com

The issues are:

1. Page is not centered
2. The left sideboxes - I'd like some space between that column and the center column. I tried adding margin-right: 1.5em; to the .leftBoxContainer (because on the .rightBoxContainer I have margin-left: 1.5em; and it added the space I wanted between the center column and right sidebox column) but it didn't work for the left column.
3. The items in the right sidebox column are not centered under the sidebox headers like they are in the left column.


If anyone could help I'd greatly appreciate it.

[kobra]

First off you have your #mainWrapper set to 950px wide BUT your main page image is too wide. So most settings are overtaken by this erroneous mismatch.
Resize the image so that it fits into the space available, your l & r columns are set to 150px so 950-300=650px and give a bit for padding & margins.
Your image is currently at photobucket???
place it on your server and it looks to be about 75px too wide allowing for margins & padding that is present.
Do this first and things may begin responding correctly

[zingslings]

Thank you Kobra.

I have resized the photo to 575 px wide and uploaded it my site instead of photobucket.

I changed margins/padding from em to px so I could get a better feel as to how much space I was using up.

mainwrapper is still set to 950px

I have the following margins/paddings (please note i removed extra info that didn't pertain such as colors, and symbols like ; } )

.centerColumn
padding-left 20px
padding-right: 20px
border: 3px

.rightBoxContainer
border: 0
margin-left: 5px

.leftBoxContainer
border: 0
margin-right: 5px (it doesn't seem to be recognizing this one)

.sideboxContent
padding: 15px

So adding all those up seems that it should leave me 7px left over, unless there's a margin/padding i am missing somewhere that is still throwing it off.

By making these changes things do seem a Little bit better. The whole site itself is a bit more centered but still seems pushed to the right some. And I still can't get some space between the left sidebox column and the center column.

[zingslings]

Hmmm, Just noticed that the white space between the left sidebox column and the center is showing in IE just not in FF - that's odd, usually things show up right for me in FF and not IE lol.

[kobra]

Well better but still not rendering as a 950px wide site should

Try resizing image small like 300px to see how the main site template should look like
Check why your main page content is housed inside an un-named div p;robably added in your define_main_page.php
Have a look at these as it adds to your 575px image or takes away space for the center

.centerColumn {
        padding-top: 5px;
	padding-left: 20px;
	padding-right: 20px;
        border: 3px dotted #93a6bc;
	}

.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew {
	margin: 1em 0em;
	}

.leftBoxContainer {
	border: 0px solid #ffffff;
	margin-top: 1.5em;
        margin-right: 5px;
        	}
.rightBoxContainer {
	border: 0px solid #ffffff;
	margin-top: 1.5em;
        margin-left: 5px;
	}

Add these to your stylesheet

#subscribeHeading (
        width: 150px;
        }

#subscribeContent {
        width: 150px;
        }

Also check your newsletter code as I am seeing a zenid and this should never be used in any link

<div id="subscribeContent" class="sideBoxContent centeredContent"><form name="subscribe" action="http://zingslings.com/shop/index.php?main_page=subscribe&amp;zenid=5c72a477ca58b501d30e0bf4673f95a6" method="post"><input type="hidden" name="act" value="subscribe" /><input type="hidden" name="main_page" value="subscribe" />Enter your email address to subscribe to our Newsletter.<label><input type="text" name="email" size="18" maxlength="90" style="width: 120px" value="Enter email address" onfocus="if (this.value == 'Enter email address') this.value = '';" /></label> <br /> <label><input type="radio" name="email_format" value="HTML" checked="checked" />HTML</label> <label style="white-space:nowrap"><input type="radio" name="email_format" value="TEXT" />TEXT-Only</label> <br /><input type="image" src="includes/templates/template_default/buttons/english/boxhead-news.gif" alt="Subscribe" title=" Subscribe " value="Subscribe"  /></form></div></td>

[zingslings]

Thanks so much for all the info.

I resized the pic to 300px wide and the pic gets smaller but the rest of the site stays exactly the same.

Added the subscriber info to my stylesheet and the copyright info at the bottom moves to the far left.

I'm going to keep playing and see what I can come up with. I upgraded from 1.3.7 to 1.3.8 and used a lot of files I had before for some of my pages so I need to just really go through page by page and see what needs updated.

[zingslings]

As for the newsletter part, I installed from the newsletter subscribe mod so never actually implemented that link myself and wouldn't now how to change that.

[kobra]

I upgraded from 1.3.7 to 1.3.8 and used a lot of files I had before for some of my pages so I need to just really go through page by page and see what needs updated.

This might explain some of it!!!
In the new version distro there is a changelog that lists the files that have changed these if you have them overriden in your template folders need to be merged/updated
https://www.zen-cart.com/tutorials/index.php?article=98
https://www.zen-cart.com/tutorials/i...hp?article=108