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 5 of 5
  1. #1
    Regular Coder Common's Avatar
    Join Date
    Jan 2009
    Location
    Glasgow, UK
    Posts
    132
    Thanks
    16
    Thanked 13 Times in 13 Posts

    Small Margin on Right Side of Page, Regardless of Window Size

    Hello there!

    I've got a really minor niggle here, but it's really annoying me as I have no idea at all what could be causing it. Basically, on the website which I'm currently developing, the browser window is constantly convinced that there's a small (maybe 10px or so) margin on the right-hand side of the page, which always initiates the horizontal scroll bar.

    This is a super minor issue when using the desktop version of the page, but the page scales down via media queries for mobile browsers etc and it actually does affect usability on smaller devices as it can be difficult to scroll straight up and down when viewing on an iphone for example, because of this tiny margin. I know it's not a big deal, but usability is key for me.

    The website in question can be seen at www.getoutglasgow.com. It hasn't been released yet, but if you navigate to www.getoutglasgow.com/wp-login.php and enter TestLogin and 12345 you will be able to login and view the site. It'll take you to a UserCP when you login, but just click "Get Out Glasgow!" in the top-left corner to access the website.

    Does anyone have any idea at all what could be causing this error? I'm hoping it's common or has happened to someone here before as I'm a bit stumped.

    Edit: I wonder, if everyone's a bit confused by this one, would it be worth just deactivating the horizontal scrollbar altogether? Or do you think this could have any usability implications which haven't occurred to me?

    Many thanks!
    Last edited by Common; 03-04-2013 at 11:09 AM.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Your div #custom_menu has the following inline style:

    Code:
    element.style {
        background-color: #565656;
        color: #DADADA;
        font-size: 0.85em;
        padding: 5px;
        text-align: right;
        width: 100%;
    }
    which is what's causing the horizontal scrollbar.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • Users who have thanked SB65 for this post:

    Common (03-05-2013)

  • #3
    Regular Coder Common's Avatar
    Join Date
    Jan 2009
    Location
    Glasgow, UK
    Posts
    132
    Thanks
    16
    Thanked 13 Times in 13 Posts
    Hi

    Thanks for your response!

    This resolves half of the issue, primarily the scrollbar appearing on the desktop version of the site, so thanks for that.

    However, if you browse the website on an iPhone if you have one available there is still a 5px or so margin on the right hand side, causing errant scrolling. Any ideas about this one?

    Thanks again

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    That's coming from #content. At small viewport widths you have the width set to 100%, but still with this additional css:

    Code:
    #content {
        border-right: 1px solid #E5E5E5;
        float: left;
        margin: 0 0 30px;
        min-height: 180px;
        padding-right: 33px;
        width: 66%;
    }
    You can see this in Firebug (see sig) by using FF and reducing the viewport window.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting

  • Users who have thanked SB65 for this post:

    Common (03-05-2013)

  • #5
    Regular Coder Common's Avatar
    Join Date
    Jan 2009
    Location
    Glasgow, UK
    Posts
    132
    Thanks
    16
    Thanked 13 Times in 13 Posts
    Ah wonderful, that's solved the problem straight away - many thanks!


  •  

    Posting Permissions

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