Grow your CSS skills. Land your dream job.

Page jumps horizontally in Firefox and IE 8

  • # June 18, 2009 at 11:39 am

    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:
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">









    RUSA Solutions

    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.


     


    # June 18, 2009 at 12:02 pm

    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;
    }
    # June 22, 2009 at 5:35 pm

    apostrophe,

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

    # June 28, 2009 at 1:41 pm

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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".