Tutorial: How to prevent page from shifting left.

smoovo

smoovo

New Member
Hi everybody.

I don't know if you got this problem before, but it is annoying. Some pages in your website looks great, but some of them shifting left when the content height smaller than the page.

By simple CSS code you can make your pages look the same, and you will look more professional.

Add this code at the beginning of each page CSS code.

HTML: 
html {height:101%;}

Yes, that's it guys. You will add scroll bar to all of your pages automatically, and this will prevent the page from jumping... ;).

- Enjoy. (and please rate this thread... Thanks.)

____________________
SMooVo- Web Design
[email protected]
www.SMooVo.com
 
Last edited:
D

d a v e

New Member
i don't agree that it looks more professional
those who usually object to it do so on the grounds that it's different behaviour to IE, but if you've been using firefox et al for any length of time then it's expected behavoiur.

you could say that centring the page with respect to the browser chrome is more professional than not doing it.

if it bothers you then by all means use the code but it means that you're assuming that all your viewers want to see the same way you do ;)
 
smoovo

smoovo

New Member
More explaination

This code act the same for all browsers, no difference. And yes, if your pages not jumping and everything is standing right in place... You are professional.

The problem is only because of the vertical scroll that shows only when the content is larger than the browser's (in some browsers it is visible but disabled).

There is many solutions for this, such as Javascript function... But what you are asking is to write long code to do small job... "Don't kill Mosquito with a Bazuka..." :rolleyes:

But It's everybody's decision to use it - It's short and It's working.

____________________
SMooVo- Web Design
[email protected]
www.SMooVo.com
 
Last edited:
F

follicle

New Member
Thanks for the reply to the thread I posted earlier and for posting this tutorial. However, the problem still seems to be occurring. See my revised code below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Free Verse Design</title>
<style type="text/css">
<!--
html, body {
height: 101%;
}

body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #000000;
background-image: url(images/bgimage.jpg);
background-repeat: repeat;
line-height: 20px;
}

I changed the height to 101% as you recommended and still got the same results. At first, I thought I wasn't placing the "101%" in the right place, so I created the code you suggested by itself on its own line, in addition to what you see above. I still got the same results.

Am I doing this correctly?

Again, thanks for helping me out with this.
 
smoovo

smoovo

New Member
to make sure...

Can you please tell me what browser are you working with? I have tried your code with FF and IE8 (which not showing scroll as default), and they worked well.

I'm asking this to learn if there is any browser that doesn't act.

Thank you.

____________________
SMooVo- Web Design
[email protected]
www.SMooVo.com
 
Last edited:
You must log in or register to reply here.
Top