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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Apr 2010
    Posts
    220
    Thanks
    116
    Thanked 1 Time in 1 Post

    Vertical + Horizontal Scoll bars on website, how to fix?

    Here is the URL to the website:

    http://www.knifecityoutlet.com/store/pc/home.asp

    I just added a simple counter (the client requested it) and now there are these vertical and horizontal scroll bars on the website, looks awful. I am pulling my hair out over here trying to fix - is it because the wrapper has no set width? Here is the current CSS:

    a:link {
    color: #FFFFFF;
    text-decoration: none;
    font-weight: bold;
    }
    a:visited {
    text-decoration: none;
    color: #FFFFFF;
    font-weight: bold;
    }
    a:hover {
    text-decoration: none;
    color: #FF0000;
    font-weight: bold;
    }
    a:active {
    text-decoration: none;
    color: #FFFFFF;
    font-weight: bold;
    }

    body {
    background-repeat: repeat-x;
    background-position: center top;
    margin: 0px;
    background-image: url(../images/bg.jpg);
    }

    #wrapper {
    width: 900px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    background-color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #FFFFFF;
    overflow: auto;
    background-image: url(../images/bg1.jpg);

    }

    #smallsearchbox {
    font-size: 11px;
    color:#999999;
    width: 210px;
    padding:2px;
    background:#fff;
    border: 1px solid #999;
    }
    #wrapper #midbar #SearchBox {
    height: 25px;
    width: 300px;
    position: absolute;
    right: 0px;
    top: 82px;
    }

    #smallsearchbox:focus {

    }

    #wrapper #header {
    height: 80px;
    background-color: #000000;
    background-image: url(../images/headbg.jpg);
    border-right-width: 1px;
    border-left-width: 1px;
    border-right-style: solid;
    border-left-style: solid;
    border-right-color: #333;
    border-left-color: #333;
    }
    #wrapper #header #logo {
    float: left;
    height: 80px;
    width: 278px;
    position: relative;
    }
    #wrapper #body {
    width: 900px;
    border-right-width: 1px;
    border-top-style: none;
    border-right-style: solid;
    border-bottom-style: none;
    border-left-style: solid;
    border-right-color: #999;
    border-left-color: #999;
    border-left-width: 1px;
    background-color: #FFFFFF;
    }

    #wrapper #footer {
    height: 80px;
    position: relative;
    clear: both;
    background-color: #600001;
    background-repeat: no-repeat;
    background-position: bottom;
    width: 890px;
    padding: 5px;
    }
    #wrapper #midbar {
    height: 25px;
    width: 900px;
    background-image: url(../images/midbg.jpg);
    }
    #wrapper #body #main {
    width: 720px;
    top: 5px;
    position: relative;
    margin-right: auto;
    margin-left: auto;
    float: left;
    padding-right: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    }
    #wrapper #midbar #navbar {
    height: 15px;
    width: 400px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #FFFFFF;
    position: relative;
    top: 5px;
    left: 5px;
    }
    #wrapper #header #login {
    height: 15px;
    width: 450px;
    position: absolute;
    right: 5px;
    top: 60px;
    font-size: 11px;
    color: #FFFFFF;
    }


    #wrapper #body #leftnav {
    float: left;
    width: 150px;
    top: 5px;
    position: relative;
    padding: 5px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 5px;
    }

  • #2
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by BlackReef View Post
    Here is the URL to the website:

    http://www.knifecityoutlet.com/store/pc/home.asp

    I just added a simple counter (the client requested it) and now there are these vertical and horizontal scroll bars on the website, looks awful. I am pulling my hair out over here trying to fix - is it because the wrapper has no set width? Here is the current CSS:
    try to remove overflow: auto

    Code:
    #wrapper {
    width: 900px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    background-color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #FFFFFF;
    overflow: auto;
    background-image: url(../images/bg1.jpg);
    
    }
    please, don't use quote to wrap code!!!

    best regards

  • Users who have thanked oesxyl for this post:

    BlackReef (04-20-2011)

  • #3
    Regular Coder
    Join Date
    Apr 2010
    Posts
    220
    Thanks
    116
    Thanked 1 Time in 1 Post
    Quote Originally Posted by oesxyl View Post
    try to remove overflow: auto

    Code:
    #wrapper {
    width: 900px;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    background-color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: normal;
    color: #FFFFFF;
    overflow: auto;
    background-image: url(../images/bg1.jpg);
    
    }
    please, don't use quote to wrap code!!!

    best regards
    Wow thank you, that fixed it. Will not quote the code anymore.

    Thank you very much, hope have a wonderful day

  • #4
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by BlackReef View Post
    Wow thank you, that fixed it. Will not quote the code anymore.

    Thank you very much, hope have a wonderful day
    you are welcome and thank you,

    best regards


  •  

    Posting Permissions

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