Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 7 of 7
  1. #1
    Junior Member
    Join Date
    Jul 2012
    Posts
    6
    Member #
    32272
    Hello community, I am working on a website http://www.keeperlocal.com/index2.php

    I have just noticed it has developed a side scrolling error! any idea what has done this and how i can fix it? Please help as this project has to be delivered soon.

    INFO: The site is built using PHP Mall Version 3, all CSS can be view here http://keeperlocal.com/images/style.css

    PLEASE HELP ME! thanks in advance

  2.  

  3. #2
    Senior Member Blackhawk095's Avatar
    Join Date
    May 2011
    Location
    Kentucky (USA)
    Posts
    384
    Member #
    27969
    Liked
    45 times
    Could you further describe your error? I don't quit understand what you mean my "scrolling error".
    [COLOR=rgb(0, 51, 102)]Student Web Designer[/COLOR]
    [COLOR=rgb(0, 51, 102)]If you thought something I said was helpful. LIKE IT![/COLOR]

  4. #3
    Senior Member Blackhawk095's Avatar
    Join Date
    May 2011
    Location
    Kentucky (USA)
    Posts
    384
    Member #
    27969
    Liked
    45 times
    Never mind. I just found the issue.
    [COLOR=rgb(0, 51, 102)]Student Web Designer[/COLOR]
    [COLOR=rgb(0, 51, 102)]If you thought something I said was helpful. LIKE IT![/COLOR]

  5. #4
    Senior Member Blackhawk095's Avatar
    Join Date
    May 2011
    Location
    Kentucky (USA)
    Posts
    384
    Member #
    27969
    Liked
    45 times
    I have fixed your issue.

    The #page-wrap and #content-wrap divs are set at a width of 1100px. You need to change the widths to 1000px.

    Example:

    HTML Code:
    #page-wrap {
        margin: 0px auto;
        background-color: #fff;
        width: 1100px;  /* CHANGE TO 1000px */
        padding: 0px;
        -moz-box-shadow: 0px 0px 15px #666;
        -webkit-box-shadow: 0px 0px 15px #666;
        box-shadow: 0px 0px 15px #666;
        z-index: 1;
        position: relative;
    }
    HTML Code:
    #content-wrap {
        float:left;
        width: 1100px; /* CHANGE TO 1000px */
        margin-top: 15px;
    }
    To apply these changes, you will obviously have to make some changes to your content area, your sidebars, and the header widths.

    You should also change the width of your form inputs on the right sidebar. They are overflowing outside of the wrapper.
    BillyG likes this.
    [COLOR=rgb(0, 51, 102)]Student Web Designer[/COLOR]
    [COLOR=rgb(0, 51, 102)]If you thought something I said was helpful. LIKE IT![/COLOR]

  6. #5
    Junior Member
    Join Date
    Jul 2012
    Posts
    6
    Member #
    32272
    wow thanks for this but why do you think this will fix the problem? the width of most screens is larger than 1100px. The input boxes are an issue as they change from browser to browser. Sorry to question your answer its just a small change but it will have a large knock on effect on the rest of the site design

  7. #6
    Senior Member Blackhawk095's Avatar
    Join Date
    May 2011
    Location
    Kentucky (USA)
    Posts
    384
    Member #
    27969
    Liked
    45 times
    I think the main issue is that your sidebars were set to a specific width, but you had divs wider than the set width, so your page wrap div was forced to expand. To compensate, the browser added the scroll bar, even though it was not needed.

    I used the developer tools in Google Chrome to adjust your code. When I changed the width of those divs, the scroll bar disappeared.

    Here are some screenshots of what it will do to your website:



    BillyG likes this.
    [COLOR=rgb(0, 51, 102)]Student Web Designer[/COLOR]
    [COLOR=rgb(0, 51, 102)]If you thought something I said was helpful. LIKE IT![/COLOR]

  8. #7
    Junior Member
    Join Date
    Jul 2012
    Posts
    6
    Member #
    32272
    I liked both posts. your a total life saver, I will also have a look into developer tools. I have it but have never used it. Thanks again mate I will have your adjustments tonight.


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:58 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com