Cherry Zen Template Support Thread

[Stuff4Toys]

I am getting ready to go live with a site running Cherry Zen. The problem I have is that in IE6 (only) the left column side boxes are pushed down below the main index contents.

Take a look at www.nativitydisplays.com and www.liberty-flag.com/ xstore/index.php

Both sites use Cherry Zen and both sites act the same.

You have to see it in IE6, but I am sure there is a css fix that I have either messed up or don't know about.

Kinya, Kinya help a guy out here?
Thanks
JOhn ><>

[jettrue]

I am getting ready to go live with a site running Cherry Zen. The problem I have is that in IE6 (only) the left column side boxes are pushed down below the main index contents.

Take a look at www.nativitydisplays.com and www.liberty-flag.com/ xstore/index.php

Both sites use Cherry Zen and both sites act the same.

You have to see it in IE6, but I am sure there is a css fix that I have either messed up or don't know about.

Kinya, Kinya help a guy out here?
Thanks
JOhn ><>

Did you follow the instructions on adjusting the sidebox widths in the readme.txt to a "t"? The original left sidebox is 150px wide, but in the css, the original width used for the left sidebox section is 165px (to accommodate padding and such).

So you want a left sidebox that is 190px wide (40 pixels wider), so you'll need to increase the original value of 165px by 40 px more.

Please find the section in the readme on increasing sidebox width.

[Stuff4Toys]

Did you follow the instructions on adjusting the sidebox widths in the readme.txt to a "t"? The original left sidebox is 150px wide, but in the css, the original width used for the left sidebox section is 165px (to accommodate padding and such).

So you want a left sidebox that is 190px wide (40 pixels wider), so you'll need to increase the original value of 165px by 40 px more.

Please find the section in the readme on increasing sidebox width.

I thought I did. I even setup the liberty xstore template from scratch.

* html #contentMainWrapper {
 height: 100%;
}
.outer {
 padding-left: 190px; /* Same width as margin-left for the float-wrap div */
 padding-right: 150px; /* Our right column width */
}
.inner {
 width: 100%;
}
.float-wrap {
 float: left;
 width: 97%;
 margin-left: -190px; /* Same length as .outer padding-left but with negative value */
}
#content {
 float: right;
 margin-right: -190px; /* Same length as .outer padding-left but with negative value */
 width: 100%;
 line-height:1.6;
 position: relative; /* IE needs this  */
}
.contentWrap {
 padding: 5px 0 5px 5px;
}
#navColumnOne {
 float: left;
 position: relative; /* IE needs this  */
}
#navColumnTwo {
 float: right;
 margin-right: -150px; /* This negative margin-right value is in this example the same as the right column width. */
 position: relative; /* IE needs this  */
}
* html #navColumnTwo {
 margin-right: -190px !important; /* Fixes IE6 Issue */
}
/* end wrappers - page or section containers*/

What did I miss?

[jettrue]

I thought I did. I even setup the liberty xstore template from scratch.

* html #contentMainWrapper {
 height: 100%;
}
.outer {
 padding-left: 190px; /* Same width as margin-left for the float-wrap div */
 padding-right: 150px; /* Our right column width */
}
.inner {
 width: 100%;
}
.float-wrap {
 float: left;
 width: 97%;
 margin-left: -190px; /* Same length as .outer padding-left but with negative value */
}
#content {
 float: right;
 margin-right: -190px; /* Same length as .outer padding-left but with negative value */
 width: 100%;
 line-height:1.6;
 position: relative; /* IE needs this  */
}
.contentWrap {
 padding: 5px 0 5px 5px;
}
#navColumnOne {
 float: left;
 position: relative; /* IE needs this  */
}
#navColumnTwo {
 float: right;
 margin-right: -150px; /* This negative margin-right value is in this example the same as the right column width. */
 position: relative; /* IE needs this  */
}
* html #navColumnTwo {
 margin-right: -190px !important; /* Fixes IE6 Issue */
}
/* end wrappers - page or section containers*/

What did I miss?

What I was trying to say with my previous post:

165 + 40 = 205

your 190px's should be 205px because the original value there was 165px, NOT 150px.

Edited To Add:
* html #navColumnTwo {
margin-right: -190px !important; /* Fixes IE6 Issue */
}
and put the above back to -170px.

[Stuff4Toys]

What I was trying to say with my previous post:

165 + 40 = 205

your 190px's should be 205px because the original value there was 165px, NOT 150px.

Edited To Add:
* html #navColumnTwo {
margin-right: -190px !important; /* Fixes IE6 Issue */
}
and put the above back to -170px.

BINGO I knew that you would spot the error in a second.

THANKS
JOhn ><>

[Stuff4Toys]

BINGO I knew that you would spot the error in a second.

THANKS
JOhn ><>

Didn't seem to help www.nativitydisplays.com

.outer {
 padding-left: 165px; /* Same width as margin-left for the float-wrap div */
 padding-right: 165px; /* Our right column width */
}
.inner {
 width: 100%;
}
.float-wrap {
 float: left;
 width: 97%;
 margin-left: -165px; /* Same length as .outer padding-left but with negative value */
}
#content {
 float: right;
 margin-right: -165px; /* Same length as .outer padding-left but with negative value */
 width: 100%;
 line-height:1.6;
 position: relative; /* IE needs this  */
}
.contentWrap {
 padding: 5px 0 5px 5px;
}
#navColumnOne {
 float: left;
 position: relative; /* IE needs this  */
}
#navColumnTwo {
 float: right;
 margin-right: -165px; /* This negative margin-right value is in this example the same as the right column width. */
 position: relative; /* IE needs this  */
}
* html #navColumnTwo {
 margin-right: -170px !important; /* Fixes IE6 Issue */

I thought I had a good understanding of this. Hmmmmm

[jettrue]

Didn't seem to help www.nativitydisplays.com

.outer {
 padding-left: 165px; /* Same width as margin-left for the float-wrap div */
 padding-right: 165px; /* Our right column width */
}
.inner {
 width: 100%;
}
.float-wrap {
 float: left;
 width: 97%;
 margin-left: -165px; /* Same length as .outer padding-left but with negative value */
}
#content {
 float: right;
 margin-right: -165px; /* Same length as .outer padding-left but with negative value */
 width: 100%;
 line-height:1.6;
 position: relative; /* IE needs this  */
}
.contentWrap {
 padding: 5px 0 5px 5px;
}
#navColumnOne {
 float: left;
 position: relative; /* IE needs this  */
}
#navColumnTwo {
 float: right;
 margin-right: -165px; /* This negative margin-right value is in this example the same as the right column width. */
 position: relative; /* IE needs this  */
}
* html #navColumnTwo {
 margin-right: -170px !important; /* Fixes IE6 Issue */

I thought I had a good understanding of this. Hmmmmm

Man, you're hurtin' me.

The original value for the left boxes in the css is 165px. The original value for the right boxes in the css is 150px. Since you changed them BOTH 15px more, you need to increase BOTH by 15 px more.

165 + 15 =180

150 + 15 =165 (you have this correct for the right sideboxes.

Please look at this section from the ORIGINAL file, and increase EACH value accordingly!