Page jumps horizontally in Firefox and IE 8

[robininsunnycal]

I have designed several websites in the last few months, and they all are experiencing the same problem:
The page layout is centered, but on some of the site’s pages, the entire page jumps to the left horizontally about 5 or 6 pixels.

I have noticed this same problem on many large corporate sites, such as http://www.ibm.com, when I view the site in IE8 or Firefox 3.0.10. It’s distracting to have the pages jump from left to right.

At my latest site design, http://www.rusasolutions.com, the home page displays correctly in Firefox 3.0.10, but when I click the Solutions link, the page displays slightly to the left of center. I have noticed this on some sites in IE 8 as well.

Here is my CSS:

Code:

/* standard elements */
* {
margin: 0;
padding: 0;
}
a,
a:link {
color: #2e6992;
text-decoration: none;
}
a:hover {
color: #6ca7d0;
text-decoration: underline;
}
body {
color: #666;
background-color: #fff;
text-align: left;
background-image: url(../img/pagebg_dark3.jpg);
font-family: “Lucida Sans Unicode”, Verdana, Geneva, Arial, sans serif;
font-size: 11px;
}

p,
cite,
code,
ul,
ol
{
font-size: 1.1em;
padding-bottom: 1.2em;
line-height: 1.3em;
font-family: “Lucida Sans Unicode”, Verdana, Geneva, Arial, sans serif;
}

dl{
font-size: 1.1em;
line-height: 1.3em;
}
h1 {
font-size: 1.3em;
margin-bottom: 4px;
color: #2e6992;
font-weight: normal;
font-family: “Lucida Sans Unicode”, Verdana, Geneva, Arial, “sans serif”;
letter-spacing: 2pt;
text-transform: uppercase;
}

h2 {
font-size: 1.2em;
margin-bottom: 6px;
color: #666;
font-weight: bold;
font-family: “Lucida Sans Unicode”, Verdana, Geneva, Arial, “sans serif”;
letter-spacing: normal;
text-transform: uppercase;
}

h3 {
font-size: 1.1em;
padding-top: 6px;
margin-bottom: 4px;
color: #2e6992;
font-weight: bold;
}

.callout {
font-size:1.3em;
font-weight: bold;
}

.deck{
font-size: 13px;
font-weight:normal;
line-height: 16px;
font-family: “Lucida Sans Unicode”, Verdana, Geneva, Arial, sans serif;
text-align: justify;
}
.photocap {
font-family: “Lucida Sans Unicode”, Verdana, Geneva, sans-serif;
font-size: 9px;
font-weight: bold;
color: #666;
}
/* misc */
.clearer {
clear: both;
}

/* structure */
#container {
margin: 0 auto;
width: 800px;
position:relative;
text-align: left;
}

/* header */
#header {
background: #fff;
height: 120px;
padding: 0px 0px 0px 0px;
margin: 0 auto;
width: 800px;
border-bottom-color: #b3b3b3;
border-bottom-width: 4px;
border-bottom-style: solid;
}
#header h1 {
color: #CCC;
font: normal 1.1em Trebuchet, Verdana, “Lucida Sans Unicode”, Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-align: right;
vertical-align: bottom;
}
#logo{
border:0;
position:absolute;
top:25px;
left:24px;
}

#sitelinks{
font: normal 1em “Lucida Sans Unicode”;
padding:0;
list-style:none;
text-transform:uppercase;
clear:both;
float:right;
margin-top: 46px;
margin-bottom: 0;
margin-left: 0;
}
#sitelinks li{
float:left;
padding:1px 4px;
border-right:1px solid #53616F;
}
#sitelinks li.last{
border:0;
padding-right:0;
}
#sitelinks a,
#sitelinks a:link{
color:#53616F;
text-decoration:none;
padding:1px 4px;
}
#sitelinks a:hover{
color:#000;
text-decoration:none;
}

/* site navigation in header area*/
#sidenav {
float: right;
width: 130px;
padding-right: 7px;
margin-top: 20px;
}
#sidenav dl{
margin: 0 0 13px 0;
}
#sidenav dt{
color: #5a849f;
font: normal 11px “Lucida Sans Unicode”, Verdana, Geneva, Arial, sans serif;
height: 17px;
margin:0;
font-weight: bold;
text-transform: uppercase;
}
#sidenav dt.long{
color: #5a849f;
font: normal 1.3em “Lucida Sans Unicode”, Verdana, Geneva, Arial, sans serif;
height: 17px;
margin:0 0 15px;
font-weight: bold;
text-transform: uppercase;
}
#sidenav dd{
list-style-image: none;
list-style-type: none;
line-height: 14px;
}
#sidenav dd a,
#sidenav dd a:link{
color: #666666;
display: block;
padding: 2px 4px 2px 12px;
text-decoration: none;
vertical-align: baseline;
background: url(../img/bullet_holloworange.gif) no-repeat 0 6px;
font-size: 11px;
line-height: 14px;
}
*html #sidenav dd a,
*html #sidenav dd a:link{
height:1%;
}
#sidenav dd a:hover{
color: #5a849f;
text-decoration: underline;
}

/* navigation for subpages*/
#subnav {
float: right;
width: 240px;
padding-right: 7px;
margin-top: 20px;
margin-left: 10px;
padding-left: 10px;
border-style: none none none solid;
border-left-width: 1px;
border-left-color: #CCC;
}
#subnav dl{
margin: 0 0 13px 0;
}
#subnav dt{
color: #2e6992;
font: normal 11px “Lucida Sans Unicode”, Verdana, Geneva, Arial, sans serif;
height: 17px;
margin:0;
font-weight: bold;
}
#subnav dt.long{
color: #2e6992;
font: normal 1.3em “Lucida Sans Unicode”, Verdana, Geneva, Arial, sans serif;
height: 17px;
margin:0 0 15px;
font-weight: bold;
}
#subnav dd{
list-style-image: none;
list-style-type: none;
line-height: 14px;
}
#subnav dd a,
#subnav dd a:link{
color: #2e6992;
display: block;
padding: 2px 4px 2px 12px;
text-decoration: none;
vertical-align: baseline;
background: url(../img/bullet_hollowblue.gif) no-repeat 0 6px;
font-size: 11px;
line-height: 14px;
}
*html #subnav dd a,
*html #subnav dd a:link{
height:1%;
}
#subnav dd a:hover{
color: #2e6992;
text-decoration: underline;
}

/* navigation */

#navigation{
background:#1B1B16;
border-top: 1px solid #575656;
margin:0 0 0 10px;
padding:0 0 0 0px;
list-style:none;
font-size:1.1em;
float:left;
width:800px;
display:inline;
}
#navigation li{
float:left;
font-weight:normal;
padding: 4px 0px 3px 20px;
}

#navigation a,
#navigation a:link{
color:#FFF;
text-decoration:none;
padding:3px 10px;
margin:0 5px 0 0;
}
#navigation a:hover{
background:#000;
color:#fbb040;
text-decoration:none;
border-bottom: 1px solid #fbb040;

}
#navigation li a.active {
color:#fbb040;;
}s
*html #navigation a,
*html #navigation a:link{
height:1%;
}

/* main */
#main {
clear: both;
padding: 0 10px 5px 28px;
}

/* home_main */
.home #main {
clear: both;
padding-left:0px;
border-top-color: #666;
border-top-width: 1px;
border-top-style: solid;
border-right-width: 0px;
border-bottom-width: 0px;
border-left-width: 0px;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
.subpage #main {
clear: both;
padding-left:0px;
background-color: #ffffff;
background-image: url(../img/shim_white.gif);
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
}
/* twocolumn_main */
.twocolumn #main {
clear: both;
padding-left:10px;
}

/* gallery_main */
.gallery #main {
clear: both;
padding-left:10px;
}

/* content */

.twocolumn #content {
margin-top: 40px;
padding-left: 10px;
float: left;
width: 370px;
}
.home #imageholder {
padding:0px 0px 0px 0px;
width: 800px;
height: 300px;
border-top: none;
border-bottom: none;
border-right: none;
border-left: none;
clear:both;
background-color: #fff;

}

.home #content {
padding:10px 25px 0 25px;
clear: both;
width: 750px;
border-top: none;
border-bottom: none;
border-right: none;
border-left: none;
margin-right: 0px;
margin-left: 0px;
background-color: #fff;
background-image: url(../img/shim_white.gif);
}

.home #pagebar {
padding:0px 0px 0 0px;
width: 800px;
height: 20px;
border-top: none;
border-bottom: none;
border-right: none;
border-left: none;
clear:both;
background-image: url(../img/graybar.gif);
}

.subpage #imageholder {
padding:0px 0px 0px 0px;
width: 800px;
border-top-color: #666;
border-top-width: 1px;
border-top-style: solid;
height: 300px;
clear:both;
background-color: #fff;

}
.subpage #imageholdertall {
padding:0px 0px 0px 0px;
width: 800px;
border-top-color: #666;
border-top-width: 1px;
border-top-style: solid;
height: 384px;
clear:both;
background-color: #fff;

}
.subpage #imageholdershort {
padding:0px 0px 0px 0px;
width: 800px;
border-top-color: #666;
border-top-width: 1px;
border-top-style: solid;
height: 54px;
clear:both;
background-color: #fff;

}

.subpage #pagebar {
padding:0px 0px 0 0px;
width: 800px;
height: 20px;
border-top: none;
border-bottom: none;
border-right: none;
border-left: none;
clear:both;
background-image: url(../img/graybar.gif);
}

.subpage #content {
padding:10px 25px 0 25px;
clear: both;
width: 750px;
border-top: none;
border-bottom: none;
border-right: none;
border-left: none;
margin-right: 0px;
margin-left: 0px;
background-color: #fff;
background-image: url(../img/shim_white.gif);
}
#content .descr {
color: #c3cad5;
font-size: 1.1em;
margin-bottom: 6px;
}

#leftcol {
margin-top: 0px;
padding-left: 0px;
float: left;
width: 370px;
}

.buttonbox{
background-color: #ddd;
padding: 5px 8px 3px;
font-size: .95em;
font-weight: bold;
color: #666;
margin-top: 25px;
margin-right: 12px;
border-top: medium ridge #dddddd;
border-right: medium ridge #2e6992;
border-bottom: medium ridge #2e6992;
border-left: medium ridge #dddddd;
margin-bottom: 15px;

}
.sidebarquote{
background-color: #ee582b;
padding: 5px 8px 3px;
font-size: .95em;
font-weight: bold;
color: #fff;
margin-top: 25px;
margin-right: 12px;
border-top: medium ridge #dddddd;
border-right: medium ridge #53616F;
border-bottom: medium ridge #53616F;
border-left: medium ridge #dddddd;
margin-bottom: 15px;

}
.sidebarquote h2{
color: #ffffff;
font-size: 1.2em;
text-align: center;

}
.sidebarquote h3{
color: #ffffff;
font-size: .95em;
text-align: right;

}
/* two-column righthandcolumn */
#rightcol {
float: right;
width: 360px;
padding: 22px 0px 0px 5px;
background-color: #FFF;

}
#rightcol dl{
margin: 0 0 13px 0;
}
#rightcol dt{
color: #ee582b;
height: 17px;
margin:0;
font-weight: bold;
text-transform: uppercase;
}
#rightcol dt.long{
color: #ee582b;
font-size: 1em;
height: 17px;
margin:0 0 15px;
font-weight: bold;
text-transform: uppercase;
}
#rightcol dd{
list-style-image: none;
list-style-type: none;
line-height: 14px;
}
#rightcol dd a,
#rightcol dd a:link{
color: #53616f;
display: block;
padding: 2px 4px 2px 12px;
text-decoration: none;
vertical-align: baseline;
background: urlurl(../img/bullet_hollowblue.gif) no-repeat 0 6px;
font-size: 10px;
font-weight: bold;
line-height: 14px;
}
*html #rightcol dd a,
*html #rightcol dd a:link{
height:1%;
}
#rightcol dd a:hover{
color: #53616f;
text-decoration: underline;
}
/* unordered list */
#content ul li {
margin-left: 18px;
margin-bottom: 2px;
background-image: url(../img/bullet_hollowblue.gif);
background-repeat: no-repeat;
background-position: left 5px;
list-style-type: none;
padding-left: 12px;
line-height: 14px;
}
#content ul ul li{
margin-left: 0px;
background-image: url(../img/bullet_hollowblue.gif);
background-repeat: no-repeat;
background-position: left 5px;
list-style-type: none;
padding-left: 12px;
font-size: 11px;
}
/* ordered list */
#content ol
{ margin: 8px 0px 0px 18px;
padding-left: 12px;
}

#content ol li
{
margin: 0px 0px 5px 0px;
padding: 0px;
}

.twocolumn #content .imageright{
float: right;
display:inline;
margin:0 0 15px 15px;
}
.twocolumn #content .imageleft{
float: left;
display:inline;
margin:8px 15px 10px 0;
}
.home .imageright{
float:right;
margin: 0px 0px 0px 20px;
}

.subpage .imageright{
float:right;
margin: 0px 0px 0px 20px;
}
.home .imageleft{
float:left;
margin: 0px 10px 0px 0px;
}

/* footer */
.home #footer {
font-size: 1em;
line-height: 18px;
margin: 0px;
text-align: center;
width: 764px;
padding-left: 18px;
font-family: Trebuchet, Verdana, “Lucida Sans Unicode”, Arial, Helvetica, sans-serif;
vertical-align: baseline;
clear:both;
padding-right: 18px;
height: 43px;
}
.home #footer a {
color: #FFF;
text-decoration: none;
}
.home #footer a:hover {
color: #6ca7d0;
text-decoration: underline;
}

.subpage #footer {
font-size: 1em;
line-height: 18px;
margin: 0px;
text-align: center;
width: 764px;
padding-left: 18px;
font-family: Trebuchet, Verdana, “Lucida Sans Unicode”, Arial, Helvetica, sans-serif;
vertical-align: baseline;
clear:both;
padding-right: 18px;
height: 43px;
}
.subpage #footer a {
color: #FFF;
text-decoration: none;
}
.subpage #footer a:hover {
color: #6ca7d0;
text-decoration: underline;
}

#pagebottom {
height: 54px;
padding: 0px 0px 0px 0px;
margin: 0 auto;
width: 800px;
background-image: url(../img/insidedarkfooter.jpg);
background-repeat: no-repeat;
}
td {
padding: 3px;
font-size: 10px;
}

/* robin added this to create three columns on the home page */
.home #sidebar1 {
float: left; /* since this element is floated, a width must be given */
width: 228px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
padding: 25px 10px 10px 20px; /* padding keeps the content of the div away from the edges */
}
.home #sidebar2 {
float: right; /* since this element is floated, a width must be given */
width: 230px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
padding: 25px 10px 10px 20px; /* padding keeps the content of the div away from the edges */
}
.home #centerbar {
margin: 0 270px; /* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. You can remove this margin if you want the #centerbar div’s text to fill the sidebar spaces when the content in each sidebar ends. */
padding: 25px 0px 10px 15px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
}
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}

Here is the HTML for the Solutions page:

Code:

ABOUT US

SOLUTIONS

SUPPORT

CONTACT

Solutions for Small Business

SalonClientCare

 

SOLUTIONS

RUSA software solutions are simple to use, affordable, effective in
managing your workload and able to support your goals of building relationships
with your customers.

Many small businesses are frustrated with off-the-shelf products that
are targeted at medium-to-large size companies because they

• Are often too general in their application.
• Contain more functionality than needed.
• Require specialist resources to operate.
• Are too expensive to purchase and maintain.

Our solutions offer a wide variety of meaningful reports and tracking systems
served up by an intuitive interface that even the most computer-shy person
will find easy to use. We pride ourselves in designing tools that are both
functional and pleasant to use and consistently productive and efficient. We’re
experts in demystifying the management of information through elegant and intuitive
interface design, useful automation, and crystal clear reporting, all of which
both support and enhance your business goals.

Our mission is to help you enhance your productivity, streamline your work
flow, increase your profitability, and make informed decisions which creatively
focus your skills through powerful, easy-to-use database management tools.

Today you need to efficiently do you job with fewer resources. Software must
enable you to apply your talents and attention to the core responsibilities
of your business. Our solutions achieve this, so that you are more productive,
empowered to utilize your full skill set, and are happier and successful.

 

ABOUT US | SOLUTIONS | SUPPORT | CONTACT
©2009 RUSA Solutions. All rights reserved.

[apostrophe]

What’s happening is a scrollbar appearing on the longer pages with more content. All you need to do is force a scrollbar to appear on all pages. Just add this to your css:

Code:

html {
overflow-y: scroll;
}

[robininsunnycal]

apostrophe,

Thank you so much for your help! I appreciate your expertise.

[cain]

Thank you very much! I was about to start pulling my hair out!

[Author]

Posts