Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS 1px gap on the left side in Firefox

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #24491
    santiago
    Member

    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.

    #55796
    apostrophe
    Participant

    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.

    #55797
    Soh Tanaka
    Member

    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~

    #55798
    santiago
    Member

    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

    #55799
    Soh Tanaka
    Member

    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~ :)

    #55802
    apostrophe
    Participant
    "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.

    #55814
    santiago
    Member

    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)
  • The forum ‘CSS’ is closed to new topics and replies.