Grow your CSS skills. Land your dream job.

1px gap on the left side in Firefox

  • # April 3, 2009 at 3:49 pm

    In my latest project, I am getting a one-pixel gap on the left side of the page in Firefox, but not IE. The weird part is it seems to disappear when you Restore Down the page so it is not at full viewing capacity, but shows its ugly self when the window is minimized. I have tried a few tricks that have been mentioned on this forum to no avail and could really use a fresh set of eyes to see where I have gone wrong.

    Test Page: http://www.sherristaxserviceplus.com/test/stsp_padding_test.htm

    CSS:

    Code:
    /*
    ————————————
    GLOBAL
    ————————————
    */
    * {
    line-height: normal;
    padding: 0;
    margin: 0;
    }

    body {
    font-size: 12px;
    font-family: arial, verdana, helvetica, san-serif;
    background: url(‘../images/bg.jpg’) repeat-y center;
    margin: 0 auto;
    padding: 0;
    }
    .clear {
    clear: both;
    }
    .clearit {
    clear: both;
    height: 0;
    line-height: 0.0;
    font-size: 0;
    }
    img {
    border: none;
    }

    /*———————————-
    COLOR

    purple: #cd5fce
    pink: #fec4e4
    Dk Green: #139981
    Lt Green: #46bfa9
    ———————————-*/

    /*———————————-
    TYPOGRAPHY
    ———————————-*/
    p {
    line-height: 1.4em;
    margin-bottom: 0.8em;
    letter-spacing: normal;
    }
    h1 {
    font-family: Trebuchet MS, verdana, Arial, sans-serif;
    font-weight:bolder;
    font-size: 22px;
    color: #139981;
    margin-bottom: 10px;
    }
    h2 {
    font-family: Trebuchet MS, verdana, Arial, sans-serif;
    color: #cd5fce;
    text-transform:uppercase;
    font-size:16px;
    }
    /*
    ————————————
    STRUCTURE
    ————————————
    */

    div#header {
    background: white url(‘../images/header.jpg’) ;
    width: 810px;
    height: 315px;
    margin: 0 auto;
    }

    div#page-wrap {
    width: 810px;
    margin: 0 auto;
    }

    div#main {
    background: white;
    }
    div#main div#no_right {
    padding: 15px 20px 30px 20px
    }
    div#footer {
    background-image: url(‘../images/footer.jpg’);
    width: 810px;
    height: 109px;
    margin: 0 auto;
    color: white;
    font-size: 10px;
    }
    div#footer a, a:visited, a:active {
    color: white;
    text-decoration: underline
    }
    div#footer a:hover {
    color: #cd5fce;
    text-decoration: none;
    }
    div#footer div#f_left {
    width: 300px;
    float: left;
    margin: 15px;
    }

    div#footer div#f_right {
    width: 300px;
    float: right;
    margin: 15px;
    text-align: right;
    }

    background: url(‘../images/footer.jpg’);

    /*———————————-
    NAV
    ———————————-*/

    #nav {
    background-repeat: no-repeat;
    margin: 0 auto;
    }
    ul#menu {
    list-style: none;
    }
    ul#menu li {
    display: inline;
    }
    ul#menu li a {
    text-indent: -9999px;
    display: block;
    height: 30px;
    float: left;
    }
    ul#menu li a.home {
    background: url(‘../images/nav_bar_01.jpg’) no-repeat center top;
    width: 62px;
    }
    ul#menu li a.services {
    background: url(‘../images/nav_bar_02.jpg’) no-repeat center top;
    width: 85px;
    }
    ul#menu li a.fees {
    background: url(‘../images/nav_bar_03.jpg’) no-repeat center top ;
    width: 63px;
    }
    ul#menu li a.about {
    background: url(‘../images/nav_bar_04.jpg’) no-repeat center top;
    width: 75px;
    }
    ul#menu li a.contact {
    background: url(‘../images/nav_bar_05.jpg’) no-repeat center top;
    width: 85px;
    }
    ul#menu li a.right {
    background: url(‘../images/nav_bar_06.jpg’) no-repeat center top;
    width: 440px;
    }
    ul#menu li a.home:active {
    background-position: center bottom;
    }
    ul#menu li a.home:hover {
    background-position: center bottom;
    }
    ul#menu li a.fees:active {
    background-position: center bottom;
    }
    ul#menu li a.fees:hover {
    background-position: center bottom;
    }
    ul#menu li a.services:active {
    background-position: center bottom;
    }
    ul#menu li a.services:hover {
    background-position: center bottom;
    }
    ul#menu li a.about:active {
    background-position: center bottom;
    }
    ul#menu li a.about:hover {
    background-position: center bottom;
    }
    ul#menu li a.contact:active {
    background-position: center bottom;
    }
    ul#menu li a.contact:hover {
    background-position: center bottom;
    }
    ul#menu li a.right:active {
    background-position: center bottom;
    }
    ul#menu li a.right:hover {
    background-position: center top;
    cursor:default;
    }

    Any help is greatly appreciated.

    # April 3, 2009 at 5:32 pm

    I’m not 100% sure why, but this works;
    Wrap the whole thing in a new div called #container and change your CSS to this:

    Code:
    body {
    background:#FFFFFF none repeat scroll 0 0;
    font-family:arial,verdana,helvetica,san-serif;
    font-size:12px;
    margin:0;
    padding:0;
    }
    div#container {
    background:transparent url(../images/bg.jpg) repeat-y scroll center center;
    margin:0 auto;
    width:1024px;
    }
    ul#menu {
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin:0;
    padding:0;
    }

    I think your problem is caused by the way you built your menu, specifically that 440px bar disguised as a link, it would be better to make a repeating background for it.

    # April 3, 2009 at 5:34 pm

    this is actually a bug that is difficult to avoid. When your browser viewport sits on an odd # width, the browser cant calculate your center background positioning correctly.

    I wrote a work around here: http://www.sohtanaka.com/web-design/1px … nment-bug/ but in your case, from my understanding all you can do is make sure that your background image + container are landing on an even width~ as soon as someone manually stretches out ur bowser on an odd #, your 1px discrepancy will reappear~

    # April 3, 2009 at 7:03 pm

    I tried the #container fix and it worked, BUT, now it throws a bottom scroll bar on it (granted that I am working on an old laptop with a smaller screen).

    I’ve also tried the repeating background trick that you mentioned a few times/ways for the menu but I couldn’t get it to work. I must have put it in the wrong spot. When I deleted the last <li> that holds the 440px graphic, its replaced by white space.

    I guess if I can’t get the background image figured out, I’ll go with it as is, unless someone has any other suggestions.

    Thanks, Scott

    # April 3, 2009 at 7:42 pm

    do you mean a horizontal scroll bar? If thats the case your container width was too large, so just minimize it so its appropriate. If your target audience is 1024, then just go with a 960px/970px width and you should be cool.

    PS I would add a green bg color with your background so people with larger monitors don’t see your white space~ :)

    # April 4, 2009 at 2:12 am
    "Soh Tanaka" wrote:
    do you mean a horizontal scroll bar? If thats the case your container width was too large, so just minimize it so its appropriate. If your target audience is 1024, then just go with a 960px/970px width and you should be cool.

    PS I would add a green bg color with your background so people with larger monitors don’t see your white space~ :)

    Soh Tanaka is right, your horizontal scrollbar is caused by the 1024px width. I just used that figure because that is the size of your bg image. I’m on a 1920 monitor and have no problems. You can set that #container width to 970px without losing your gradient.

    I made the body bg white because I thought that was the look you were going for, if not just change it to #139981.

    For the nav, take a 1px slice of that bar, set the div#nav height to 30px and repeat the slice along the x axis.

    # April 5, 2009 at 12:34 pm

    Thanks everyone. Resizing the newly added #container from 1024 to 960 did the trick.

    This place rocks.

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

You must be logged in to reply to this topic.

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