Zen Cart Logo
Forums / Basic Configuration / Cart Messing up my layout!

Cart Messing up my layout!

Locked

Views: 1,324

Results 1 to 5 of 5
This thread is locked. New replies are disabled.
26 Nov 2008, 5:11 PM
#1
tenessaa avatar

tenessaa

New Zenner

Join Date:
Nov 2008
Posts:
8
Plugin Contributions:
0

Cart Messing up my layout!

ACK.. I'm losing my mind. When you add something to the cart and all the way through checkout, my right sidebar goes insane. It expands and distorts the rest of the page. Can someone take a look? Items are all free right now.

http://www.digiscraplife.com/store

Any suggestions would be appreciated.

26 Nov 2008, 5:45 PM
#2
stevesh avatar

stevesh

Black Belt

Join Date:
Feb 2005
Location:
Lansing, Michigan USA
Posts:
19,793
Plugin Contributions:
2

Re: Cart Messing up my layout!

Check the LABEL statements in your style sheet - you have a couple with widths of 11em and 15 em.

26 Nov 2008, 6:30 PM
#3
tenessaa avatar

tenessaa

New Zenner

Join Date:
Nov 2008
Posts:
8
Plugin Contributions:
0

Re: Cart Messing up my layout!

any suggestions on what they should be? I didn't edit those that's what came with zencart install. Should I try smaller or larger. I'm just getting started in php and am unfamiliar with the em measurement

26 Nov 2008, 6:46 PM
#4
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Cart Messing up my layout!

Find this in your stylesheet:```
#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
margin: 0em;
padding: 0em;
width: 720px;
}

You need to separate those selectors into two lists, one with the width and one without. Decide which elements you really want to be that wide.

"em" is a measurement relating to font size. It essentially is a width equivalent to an "m" character in the particular font; for general Zen Cart purposes, the base font is 10px high and an em is 10px - this makes converting between em and px easy. In places where you have different size text, an em may be a different size also. This helps when making page layouts that allow users to display larger fonts for reading without destroying the layout - the whole layout will expand with the text.
26 Nov 2008, 7:22 PM
#5
tenessaa avatar

tenessaa

New Zenner

Join Date:
Nov 2008
Posts:
8
Plugin Contributions:
0

Re: Cart Messing up my layout!

Bless you you are a GOD! :hug:

gjh42:

Find this in your stylesheet:```
#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
margin: 0em;
padding: 0em;
width: 720px;
}

> You need to separate those selectors into two lists, one with the width and one without. Decide which elements you really want to be that wide.
> 
> "em" is a measurement relating to font size. It essentially is a width equivalent to an "m" character in the particular font; for general Zen Cart purposes, the base font is 10px high and an em is 10px - this makes converting between em and px easy. In places where you have different size text, an em may be a different size also. This helps when making page layouts that allow users to display larger fonts for reading without destroying the layout - the whole layout will expand with the text.