Sideboxes overlap problem

[beast666]

Do what thou wilt shall be the whole of the Law.

Why do my r.hand sideboxes overlap the stuff in the centre on my 'tell a friend' page? The 'submit' button is buried under a sidebox and can't be clicked! I haven't modified anything that would have caused this, as far as I know.

Love is the law, love under Will.

[birdoasis]

Either you fixed it or someone has placed a vision distortion spell on you.

I checked it in both ie7 and FF. it looks fine. Except that the minerals image is really small.

Now I'm going to send you an email asking questions about adding incense to my woodturnings.

JP

[tatiana77]

I'm having the same problem, argh. Please take a look at screenshots:

wolfandrabbit5.jpg is my main page and the right sidebox is exactly where it should be, although I think it's working well because I edited the main content from Define Pages Editor (!?)

However, the other two screenshots show how the right sideboxes overlapping the main content. I checked margins/padding/size.. and my admin>layout settings>column right and col. rt. box is set at 120px. The only image at the moment is the paypal logo, which is 120px width (originally I thought this was the issue...)

I've never had a problem with the left sideboxes...

Only reference in my stylesheet.css to the center column is:
.centerColumn {
background-color: white;
border: 1px solid black;
padding: 1.5em;
margin: -0.5em 1em 1em 1em;
width: 100%;
}

Please help, anybody?

Tatiana

[tatiana77]

OK, I'm so happy I figured this out... if anyone finds that the way I did this is wrong, please correct me, I'll gladly modify it...

Here's what I did in my stylesheet.css (4 things):

#mainWrapper {
text-align: left;
width: 1000px; <-- this works if your overall width is set to 1000px
vertical-align: top;
}


#navColumnTwoWrapper {max-width: 150px}


.centercolumn {
margin: -0.5em 1em 1em 1em;
min-width: 620px
}


#indexDefault {width: 100%}

Now change:
Admin>Layout Settings>Column Width: Right Boxes = 150px
Admin>Layout Settings>Column Width: Right = 150px
My Left Boxes and Left Columns are set to 175px

I'm sure it depends on your own stylesheet/layout, but the max-min width helped me a lot to restrict the sizes.

Hope it helps, I spent 4 hours trying to figure it out...
Tatiana

[beast666]

Thanks! I'm glad you've sorted your columns - did you work out what it is in the un-modified zen files that makes the r. hand column behave differently? Also, I'm interested in changing my mainwrapper width but am worried about it displaying differently at different resolutions. Don't you find 1000px too large for some customers?

[tatiana77]

Hi

Seems like these changes don't function as great on IE7 or 6... sigh. Back to the drawing board I guess!

My settings are at 1024X768 and it looks fine, but of course when set at smaller, the right hand side disappears for those users... well you brought up a good point.
I think 1000px might be a little large, you're right, but if anything I'll narrow it slightly when I revise the whole thing.

Not sure what you mean about the un-modified zen files... you mean the stylesheet?

Tatiana

[beast666]

Hi Tatiana. I was referring to the 'virgin installation' of Zen-cart, where the overlap problem already exists - it's not something we've messed up by mistake (although I do manage to accidentally mess up various other parts of my store). PM

[tatiana77]

I had to revise my entire stylesheet to see what the total of all the margins and paddings were set to for left/right sideboxes and center column. I also narrowed it down a lot, thanks for your tip, I'm sure those who still use 800X600 will be thrilled, loll. Everything was trying to squeeze in thus the overlap problem occured.

It seems to be good now, in both FF and IE7...
Take a look if you'd like.

http://www.wolfandrabbit.com/zencart

Yeah, on to tackling the other issues...

Tatiana

[beast666]

Yeah, looking good! I like your sizing chart - did you do that with EZ-pages?

[tatiana77]

Thanks!

Nope, I used the About_Us download, and just cloned it for sizing chart.

The graphics are done in photoshop...

tat