Css Alignment Bug Moves my page when I click on a link

[darran 0]

This is a bug I am really confused by and I hope I can get some help over here.

I am in the midst of creating my very own WordPress Theme for my site which involves full styling using CSS. I am moving away from tables.

I have a layout which is 770px in width (fixed), and I want to align it to the center.

Ideally, this is what I put in my CSS.

#wrapper {   margin: 0 auto 0 auto;}

This visually looks fine on my browser at first. But when I click on say, a post permalink which will bring me to the view the entire post. The entire layout shifts to the left by a mere 5px. Can anyone tell me what is going wrong?

If you need to see any code, just make a mention and I will give it to you.

[BuffaloHelp 24]

I thought aligning center is just

margin: 0 auto;

this centers from left and right. And to center top and bottom try placing padding instead of margin.

[Saint_Michael 3]

Hard to say really it could be anything in the code, I would say we would need to see the site and a demo page for people to add something it and see it in action and the CSS code as well. Nothing really comes to mind as to why it would misaligned like that, unless your mixing fixed and liquid width's within your CSS. But thats only a guess without looking at the code and the demo page.

[truefusion 3]

I don't believe it's due to the CSS since you mention everything works fine until you click a link, and 'cause the CSS provided should work fine. Does this problem occur only when you click a link or have you experienced it with other things? We'll have to be able to view the coding to get down to the problem.

[Saint_Michael 3]

After doing some research it would seem that trying to align using auto will not work in some browers and so you would have to do something like this

div#container{margin-left: 10%;margin-right: 10%;}

but here is a great example of what you want to achieve

http://forums.xisto.com/no_longer_exists/

Thee list the code of how to set it up, hopefully that gives you a couple of idea's where to look into solving your problem.

[darran 0]

Thank you for the response, really quick!

I am at work now so unfortunately, I am not able to provide you with code listing of my style.css

I know it is a problem with the CSS because when I don't align the container to the center, everything works fine, the page does not shift at all.

I can't possibly give you a demo link as this wordpress test blog is hosted on my localhost, I am not sure how to install 2 instances of WordPress in my host. What I can do is to give you some screenshots though.

I am not mixing fluid with fixed layout, it is a pure 770px layout. The only problem is that the main page is positioned at say 0px (where 0px is the original position where it is supposed to be) and the rest of the pages like my post permalink and pages are positioned at say 5px. There is no change in the width of the container, just the position of it.

I will have a go at the

margin: 0 auto;

instead of

margin: 0 auto 0 auto;

Though, I am not sure what is the difference it would make. I will be going the entire look through my style sheet when I get back.
Edited June 27, 2007 by darran (see edit history)

[jlhaslip 4]

margin: 0 auto 0 auto;

This sets the margins according to the pattern top, right, bottom, left.

margin: 0 auto;

This sets the margins according to the pattern top and bottom, left and right.

Effectively making each of these rules identical, so this is not the rule which is affecting the centring of your page.

IE uses text-align: center instead of the margin rule, so these two rules are typically combined in the CSS file to allow IE to center using one rule and the more compliant Browsers to use the margin rule.

As per previous posts, we would need to see the entire html code for the page as well as the CSS file.

What padding have you applied? And what Browser are you using?

[darran 0]

I have found what is wrong with the problem. It was the container height, if I left it as it is, the page will shift position. How do I get around this problem, if I set the container as 50 000 pixels, they don't seem to move but that doesn't seem like the way to go about this problem isn't it? Can anyone help?

[jlhaslip 4]

how is it defined now?

[Saint_Michael 3]

Was the container height smaller or bigger then the wrapper? Although I wouldn't think the smaller container would be such a problem. I believe a z-index will need to be set up in order for your links to be on top of the container, or a z-index on that actual container so it stay above the rest of the template.

[darran 0]

There was no problem in IE, but in Firefox there was. My wrapper height was smaller than the window height itself. Is there any place I can study more about css?