Jump to content
xisto Community
Sign in to follow this  
darran

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

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by darran (see edit history)

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.