Results 1 to 5 of 5

Thread: please stop my horizontal scrollbar

  1. #1
    Join Date
    Aug 2005
    Location
    Leamington Spa, UK
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default please stop my horizontal scrollbar

    Hi, I have an annoying horizontal scrollbar appearing on all my pages in all the main browsers. It seems that the page is wider than I have specified when narrowing the browser window. What I need is to completely remove this scrollbar and the annoying extra width. Can anyone help?

    Example page:
    http://www.scholastic.co.uk/bookfair...-book-fair.htm

    Here's my CSS:
    html, body {height:100%;}
    body {
    padding:0;
    margin:0;
    color: #000000;
    background-image: url(../images/bg-blue.jpg);
    background-repeat:repeat-x;
    }
    #outer{
    height:100%;
    min-height:100%;
    margin-left:200px;
    margin-right:200px;
    margin-bottom:-100px;
    color: #000000;
    }
    html>body #outer{height:auto;}
    #header{
    border-top:1px solid #fff;
    color: #000;
    text-align:left;
    position:relative;
    margin:0 -201px;
    padding-top:0px;
    }
    * html #header{height:56px;he\ight:10px}
    #left {
    position:relative;
    width:200px;
    float:left;
    margin-left:-199px;
    padding-top:12px;
    left:-2px;
    margin-right:-1px;
    }
    #left p {padding-left:2px;padding-right:2px}
    #right p {padding-left:2px;padding-right:2px}
    #right {
    position:relative;
    width:200px;
    float:right;
    margin-right:-199px;
    padding-top:12px;
    left:2px;
    margin-left:-1px;
    margin-bottom:95px;
    }
    * html #left {padding-bottom:65px ;margin-right:-3px;}/*3px jog */
    * html #right{margin-left:-3px; left:4px;
    }
    #footer {
    padding: 10px 0 0 0;
    clear:both;
    height:65px;
    background-image:url(../images/footerbackground.jpg);
    background-repeat:repeat-x;
    color: #000000;
    text-align:center;
    position:relative;
    }
    * html #footer {
    \height:65px;
    he\ight:65px;
    }
    #clearfooter{clear:both;height:95px;}
    div,p {margin-top:0}
    * html #maincontent {height:1%;margin-bottom:12px}
    #maincontent {position:relative;width:98%;float:left;}
    #logo {
    float:left;
    display:inline;
    margin: 16px 0px 0px 10px;
    width: 214px;
    height: 26px;
    voice-family: "\"}\"";
    voice-family: inherit;
    width:214px;
    height: 26px;
    }
    html#logo {
    width: 214px;
    height: 26px;
    }
    #navcontainertop {
    margin: -41px 0 -2px 330px;
    padding: 10px 0 0 0;
    width: 330px;
    clear:both;
    text-align:left;
    background-image:url(../images/navigation/capt-underpants.gif);
    background-position:right;
    background-repeat:no-repeat;
    }
    #navcontainertop img {display:inline;}
    #navlist
    {
    width:640px;
    clear:both;
    margin: 0px 0px 0px 165px;
    padding: 0px 0px 0px 90px;
    voice-family: "\"}\"";
    voice-family: inherit;
    width:720px;
    }
    html#navlist {
    width: 720px;
    }
    #navlist li
    {
    height:21px;
    padding: 3px 2px 0px 16px;
    margin: -1px;
    display:inline;
    line-height:27px;
    background-repeat:no-repeat;
    background-image: url(../images/navigation/tabbginbetween.jpg);
    voice-family: "\"}\"";
    voice-family: inherit;
    padding: 7px 2px 5px 16px;
    }
    #navlist li a
    {
    padding: 0px 0px 0px 3px;
    text-decoration: none;
    font-weight:bold;
    }
    #navlist li a:link { color: #448; }
    #navlist li a:visited { color: #667; }
    #navlist a
    {
    padding: 0px 0px 0px 3px;
    text-decoration: none;
    font-weight:bold;
    }
    #navlist li a:hover
    {
    color:#8CA5C4;
    }
    li#activated
    {
    background-image:url(../images/navigation/tabbgwhiteinbetween.jpg);
    }
    li#afteractive
    {
    background-image:url(../images/navigation/tabbgwhiteinbetween2.jpg);
    }
    #navlist li a#current
    {
    color:#83B2FA;
    }
    li#start
    {
    background-image: url(../images/navigation/tabbgleft.jpg);
    }
    li#startactive
    {
    background-image: url(../images/navigation/tabbgleftactive.jpg);
    }
    li#end
    {
    background-image: url(../images/navigation/tabbgright.jpg);
    }
    li#endactive
    {
    background-image: url(../images/navigation/tabbgright2.jpg);
    }
    #navlistsub {
    clear:left;
    width: 810px;
    margin: 0px 0px 0px 0px;
    padding: 6px 0px 0px 202px;
    background-image:url(../images/bookfairs-main-title.gif);
    background-repeat:no-repeat;
    voice-family: "\"}\"";
    voice-family: inherit;
    width:700px;
    }
    html#navlist {
    width: 700px;
    }
    #navlistsub li
    {
    height:27px;
    padding: 0px 2px 5px 16px;
    margin: -1px;
    display:inline;
    line-height:27px;
    background-repeat:no-repeat;
    background-image:url(../images/navigation/inactivesub-blue.gif);
    voice-family: "\"}\"";
    voice-family: inherit;
    padding: 6px 2px 7px 16px;
    }
    #navlistsub li a
    {
    margin: 0px;
    padding: 0px 0px 0px 3px;
    text-decoration: none;
    font-weight:bold;
    }
    #navlistsub a
    {
    padding: 0px 0px 0px 3px;
    text-decoration: none;
    font-weight:bold;
    }
    #navlistsub li a:link { color:#000000; }
    #navlistsub li a:visited { color: #000000; }
    #navlistsub li a:hover
    {
    color:#FFFFFF;
    }
    li#activesub
    {
    background-image:url(../images/navigation/activesub-dblue.gif);
    }
    li#afteractivesub
    {
    background-image:url(../images/navigation/afteractivesub-blue.gif);
    }
    #navlistsub li a#currentsub
    {
    color:#ffffff;
    }
    li#startsub
    {
    background-image: url(../images/navigation/start-inactivesub-blue.gif);
    }
    li#startactivesub
    {
    background-image: url(../images/navigation/start-activesub-dblue.gif);
    }
    li#endsub
    {
    background-image: url(../images/navigation/end-inactivesub-blue.gif);
    width:60px;
    }
    li#endactivesub
    {
    background-image: url(../images/navigation/end-activesub-dblue.gif);
    width:60px;
    }

    Thanks in anticipation.

  2. #2
    Join Date
    Aug 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    cadillandy: Check your widths. With a quick glance, it looks like your width in pixels exceeds the original size (starts out like 200, and a banner goes to 301).

    I will look closer at it when I have more time. I am heading out the door to work! Hope I helped....

    JenR

  3. #3
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,878
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Avoid using absolute px values.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  4. #4
    Join Date
    Aug 2005
    Location
    Leamington Spa, UK
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks JenR, I reviewed all my widths, and after hours of trial and error, I've managed to remove the horizontal scrollbar on all browsers without compromising my design.

    Cheers.

  5. #5
    Join Date
    Jun 2006
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Horizontal Scrollbar, make it not visible

    Quote Originally Posted by jenr
    cadillandy: Check your widths. With a quick glance, it looks like your width in pixels exceeds the original size (starts out like 200, and a banner goes to 301)....
    This would not apply for someone with only text would it, this has not absolute width setting?

    If so how does one just tell the scrollbars-left-visble:false; or something like that ??

    -Aaron

Bookmarks

Posting Permissions

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