Forums / Templates, Stylesheets, Page Layout / Main content appeared shifted a few pixels

Main content appeared shifted a few pixels

Views: 837

Results 1 to 7 of 7
6 Sep 2011, 12:41 PM
#1
icecold avatar

icecold

Zen Follower

Join Date:
Jul 2008
Posts:
360
Plugin Contributions:
0

Main content appeared shifted a few pixels

This a CSS question as I am developing a custom template, but run into a weird behavior, I need to fix, and maybe someone with a deep knowledge in CSS programing might be able to give me an insight of why or what can I do to fix it.

What it happens is the main content (center column and sidebar) and their wrappers are slightly out of alignment, in fact they are supposed to be centered with margin:0 auto; but they are shifted a few pixels.

I noticed this problem in all browsers I tested it, named them Firefox, Chrome, Safari and IE9.

I have all webdevelopers plugins for Firefox and I couldn't find where the problem was in fact all my attempted corrections failed.

Please take a look at my site and see what I mean:
http://www.theoutletseason.com/electronics

6 Sep 2011, 9:10 PM
#2
petlife avatar

petlife

New Zenner

Join Date:
Jun 2010
Location:
Denmark
Posts:
62
Plugin Contributions:
0

Re: Main content appeared shifted a few pixels

I made this change an made it look like this (see img)
Hope this helps You :bigups:

#centerColumnWrapper, #centerColumnWrapperb {
width: 978px;
}
#centerColumnOuter {
height: 15px;
margin-bottom: 0;
margin-left: 0.5em;
margin-right: 0.5em;
margin-top: 0;
width: 978px;
}
#centerColumnWrapper2 {
margin-bottom: 0;
margin-left: 0.5em;
margin-right: 0.5em;
margin-top: 0;
width: 978px;
}
#centerColumnWrapper2b {
margin-bottom: 0;
margin-left: auto;
margin-right: 7px;
margin-top: 0;
overflow-x: hidden;
overflow-y: hidden;
width: 967px;
}
.centerColumn {
display: inline;
float: left;
line-height: 1.6em;
margin-bottom: 2%;
margin-left: 2%;
margin-right: 2%;
margin-top: 0;

text-align: left;
width: 75%;

http://www.petlife.dk/temp/test.jpg

Morten Andersen
Petlife
Web: http://www.Petlife.dk

7 Sep 2011, 2:16 AM
#3
icecold avatar

icecold

Zen Follower

Join Date:
Jul 2008
Posts:
360
Plugin Contributions:
0

Re: Main content appeared shifted a few pixels

Hi Morten thank you for giving me a solution, I apply it to my website and it helped me locate a problem I didn't see before, so after that I made another modification that allowed me to center the main content, however the footer is still shifted but to the left! Everything is positioned exactly at 374px, and the footer is at 371px! I modified the wrapper but still nothing ...

Thanks again for taking the time to give me that solution!

7 Sep 2011, 2:53 AM
#4
dbltoe avatar

dbltoe

Totally Zenned

Join Date:
Jan 2004
Location:
N of San Antonio TX
Posts:
9,858
Plugin Contributions:
18

Re: Main content appeared shifted a few pixels

Zen Cart validates out of the box. Anytime you add a template, mod, or edit any page you need to re-validate the code before "messing" with the "look."
Most of your 262 warnings on the page are minor, but some WILL effect the way the site presents itself.

Need a hand with Zen Cart? Hire the team at myZenCartZone.com for upgrades, repairs, and custom plugins.
Zen Cart Certified hosting at myZenCartHost.com

7 Sep 2011, 4:01 AM
#5
icecold avatar

icecold

Zen Follower

Join Date:
Jul 2008
Posts:
360
Plugin Contributions:
0

Re: Main content appeared shifted a few pixels

I know how the template system works, so I was careful to check out there was any code that might be messing up with the appearance, however as the nature of CSS is to cascade, and there are things such as specificity and inheritance, that sometime mess things up, I was working directly with the stylesheets, I messed with the code before, because I had to develop a payment module from scratch, so I know first hand what you mean ... And before embarking in such tasks I studied the dependencies and run some code by hand, I even used tools to see if there was a script that was missed so as I said I try to go step by step. But my knowledge in current CSS is limited, that's why I asked for help, just thought it had to be something really stupid, I know there are visual things that are affected from the configuration itself, but I needed to update the width of the template to make it current, and added the header as a background. I even used a combination of background images and CSS3 gradients and rounded corners, to improve some styles, but believe me I have been working with this template for years. And now it was the time to add some new gizmos such as a slideshow and a multi-column menu, but before that, I needed to fix the positioning errors, and improve usability. I didn't even bother to do the CSS or XHTML test, -I knew there were too many errors beforehand-, because I had to have categories with & in between and that can't be modified into a /, so I knew that can lead to db problems and CSS and html errors. what I wanted to do was simple, just find out why the main content wrapper was shifted a few pixels to the right.

7 Sep 2011, 4:36 AM
#6
dbltoe avatar

dbltoe

Totally Zenned

Join Date:
Jan 2004
Location:
N of San Antonio TX
Posts:
9,858
Plugin Contributions:
18

Re: Main content appeared shifted a few pixels

I really think the errors (other than & in a product name which should be entered as &) are causing the shift.
Also, you have retained a stylesheetold.css which is fighting with the regular stylesheet. Stylesheets will load as long as .css is the extension. .old is also not a good choice as .old files can be accessed and will cause PCI problems. I generally use my initials as the extension.

Need a hand with Zen Cart? Hire the team at myZenCartZone.com for upgrades, repairs, and custom plugins.
Zen Cart Certified hosting at myZenCartHost.com

7 Sep 2011, 3:30 PM
#7
icecold avatar

icecold

Zen Follower

Join Date:
Jul 2008
Posts:
360
Plugin Contributions:
0

Re: Main content appeared shifted a few pixels

Well the database strips the &
As far as the 'old' stylesheet it was just a quick copy of my main stylesheet while experimenting, now I changed the name to .bad, so there is no way for conflict ...
I am in a phase of testing layouts and themes, and see how the visitors respond.