Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    1 px Alignment Browser Bug

    Hi there

    I'm having a bit of problem with the 1px alignment bug across different browers. My OS is XP.

    So in IE8/Opera/FF it looks fine yet in Chrome things are pushed out of place by 1px.

    So to fix this I used this code

    Code:
    html {
      margin-left: -1px;
      overflow-Y: scroll;
    }
    It works in fixing it on all browsers.

    That was until someone told me everything was out of place on Windows 7 across all browsers. It appears that removing the code above fixes it in Win7 for everything but chrome. So without the code things are off by 1px in Chrome for Win7/Xp.

    What am I doing wrong

    Thankful for any help that comes my way

    Edit:

    http://www.popsmokegames.com
    Last edited by ironsuitedcat; 03-08-2012 at 01:07 PM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,803
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    What am I doing wrong
    How could we know with that given CSS? Please post your complete page or a link to your page.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Sorry I forgot to post a link, edited OP with link

  • #4
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,333
    Thanks
    5
    Thanked 363 Times in 360 Posts
    I'm not sure I'm seeing any issue with regards to misalignment in different browser. Also, this has nothing to do with the OS you're using. Browsers render the markup, not operating systems.

    Maybe if you're still seeing an issue, you could take screenshots of the differences you see and point them out for us.
    Teed

  • #5
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks for the reply.

    Example on Chrome on Xp

    http://i.imgur.com/6Jq94.jpg

    Example on the 1px out on Chrome on Win7

    http://i.imgur.com/kKk7D.jpg

    People have reported no problems on FF/IE/OP on both Win7 and XP so not sure why Chrome on Win7 is causing a 1pixel shift. I've had a couple of people report the same problem.

    If I remove this code

    Code:
    html {
      margin-left: -1px;
      overflow-Y: scroll;
    }
    the problem is fixed on Chrome Win7 but appears on Chrome XP.

    Strange problem I haven't come across before

  • #6
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,333
    Thanks
    5
    Thanked 363 Times in 360 Posts
    The shift I think is coming from the addition of the scrollbar. Not sure why some browsers may add it or not. Perhaps it depends on how many plugins you have installed in that browser, but try adding:

    html {
    overflow: scroll;
    }

    in your stylesheet.

    This will force a scrollbar in all browsers regardless of page length.
    Teed

  • Users who have thanked teedoff for this post:

    ironsuitedcat (03-08-2012)

  • #7
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Think that may have fixed it. Only had one positive verification from someone using chrome on win7 but they say it's fixed.

    So what I did was replace this code

    Code:
    html {
      margin-left: -1px;
      overflow-Y: scroll;
    }
    with the one you said

    Code:
    html {
    overflow: scroll;
    }
    At first it didn't work until I added back in

    Code:
    margin-left: -1px;
    So final code was

    Code:
    html {
    margin-left: -1px;
    overflow: scroll;
    }
    This is now how it looks in Win7

    http://i.imgur.com/8YMTL.jpg

    Which seems to have fixed it. Will wait on some more verification. It was a bit of an odd anomaly and I probably taken ages to find a fix. So ty

  • #8
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,333
    Thanks
    5
    Thanked 363 Times in 360 Posts
    This may be a better fix.

    You're kind of defeating the style when you think you need to go back and add that negative margin, which you shouldn't need to. Besides, I'm thinking the scrollbar is more than 1px.
    Teed


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •