why does CSS slider bar have a gap in it?

Posted on 2012-09-12
Last Modified: 2012-09-12
Please check this out:

Why does the slider bar have a gap in it?  I can't figure it out.  Please let me know how to close the gap.

Question by:Revolution9
    LVL 42

    Expert Comment

    by:Chris Stanyon
    Your sliderbar is 260px deep, but the background image used for the top part (scrollbar_vertical_toppart.png) is only 174px deep - that's why you get the gap.

    Author Comment

    thanks for that response, but I"m not seeing it.  Can you tell me how to fix?  Here's the code:

    <!DOCTYPE html>
    <html lang="en">
    <meta charset="utf-8" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>sharon farber</title>
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <link href='' rel='stylesheet' type='text/css'>
    <link href="css/slickscroll.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src=""></script>
    <script src="js/jquery.mousewheel.js" type="text/javascript"></script>
    <script src="js/jquery.slickscroll.js" type="text/javascript"></script>
    <script type="text/javascript">

    var scroll1, scroll2, short

    $(document).ready(function () {
          scroll1 = $('#divMain1').slickscroll({ "verticalscrollbar": true });
          scroll2 = $('#divMain2').slickscroll({ "horizontalscrollbar": true });
          short = $('#divShort').slickscroll({ "verticalscrollbar": true });

            $('#btnAdd').click(function () {
                $('#divShort').append("blah blah blah blah blah blah blah blah blah blah blah blah blah blah");



    <div id="wrapper">
      <!-- header start -->
        <div class="logo_block">
          <h1 class="lefts">Sharon Farber composer</h1>
            <li><a href="index.html">home</a></li>
            <li><a href="#">news</a></li>
            <li><a href="#">music</a>
                <li><a href="#">dropdown</a></li>
                <li><a href="#">dropdown</a></li>
                <li><a href="#">dropdown</a></li>
                <li><a href="#">dropdown</a></li>
            <li><a href="#">video</a></li>
            <li><a href="#"><em>bio</em></a></li>
            <li><a href="#">credits</a></li>
            <li><a href="#">gallery</a></li>
            <li><a href="#">press</a></li>
            <li><a href="#">blog</a></li>
            <li><a href="#">store</a></li>
            <li><a href="#">contact</a>
      <!-- header end -->
      <!-- body start -->
      <section id="container">
        <div id="inner_page">
        <div class="gaper" style="height:12px;">&nbsp;</div>
        <div id="divMain1" class="slickscroll">
        Award winning Composer <strong>Sharon Farber</strong>, originally from Israel, has received critical acclaim as a composer in the Concert world as well as that of Film and TV. She brings to her music influences from her Middle Eastern heritage as well as her extensive knowledge of Classical and Western music.<br/><br/>

    Sharon began her musical career at the age of seven, as a classical pianist. After graduating from Thelma -Yelin High School for the Arts, she served in the IDF (Israeli Defense Force) and later worked as a theater composer and musical director in Israel. She won the first prize in Colors in Dance in 1992 for her music for choreography. In 1994, she moved to Boston upon receiving a scholarship from Berklee College Of Music. During her studies, she won the first prize in the yearly Professional Writing Division Concert with her first string quartet. After graduating Summa Cum Laude in 1997 (majoring in both Classical Composition and Film Scoring) she moved to Los Angeles to begin her professional career. Miss Farber was the recipient of the prestigious Academy of Television Arts and Sciences Internship in Film Scoring, as well as the Mentorship program of the Society of Composers and Lyricists, on which she currently serves as a board member. <br>
    Ms. Farber has been writing concert and choir music in parallel to her film-scoring career, and has many national and international premiers and performances to her credit. To name a few: <strong>The Third Mother / Mothers’ Lament</strong>, which was world premiered by the <strong>Los Angeles Master Chorale, ASHKINA,</strong> for mixed choir, chamber ensemble and Ethnic Instruments, <strong>Translucent Rocks,</strong> commissioned and premiered by the Israeli Chamber Orchestra, Chorale works, song cycles, and many more.  Recent commissions include the <strong>Laguna Beach Music Festival, Pacific Serenade Ensemble, Orange County Women’s Chorale, Culver City Symphony Orchestra, The Jewish Symphony Orchestra and iPalpiti Artists International</strong>. Recently two outstanding sopranos released CDs with Sharon’s music (Hila PLitmann and Sharon Rostorf Zamir), and she is the <strong>Composer In Residence</strong> of the <strong>Beverly Hills International Music Festival</strong> as well as the music director of <strong>Temple of the Arts in Beverly Hills, CA</strong>. Sharon’s next commission is for <strong>Beer - Sheva Symphony Orchestra (Israel)</strong>- a new piece for Soprano and Symphonic Orchestra for the 2103/14 season that will feature GRAMMY AWARD winner Soprano Hila Plitmann. <br>
    In the Film and TV industry, Sharon has been working with such companies as <strong>NBC, CBS, Showtime and WB</strong> as well as writing music for features films. She won the Telly Award for best score and her orchestral score for the film <strong>“When Nietzsche Wept”</strong> was released commercially. She has recently completed the score to the powerful documentary film <strong>UNMASKED—JUDEOPHOBIA</strong> and is gearing up to score <strong>BUDDHA EYES</strong> for producer Aaron Millar. <br>
    In addition, Sharon is the Music Director of <strong>Temple of the Arts in Beverly Hills</strong>. </p></div>
      <!-- body end -->
      <!-- footer start -->
      <footer> <span class="copyright lefts">&copy;2012 Sharon Farber  •  Website design by Richard Stellar / <a href="" target="_blank">Interstellar9</a></span> <span class="rights"> <a href="#" class="social_link"><img src="images/facebook.png" alt=""></a> <a href="#" class="social_link"><img src="images/twitter.png" alt=""></a> <a href="#" class="social_link"><img src="images/you-tube.png" alt=""></a> <a href="#" class="social_link"><img src="images/imdb.png" alt=""></a> <a href="#" class="social_link"><img src="images/like.png" alt=""></a> <a href="#" class="social_link"><img src="images/rss.png" alt=""></a> </span> </footer>
      <!-- footer end -->
    LVL 42

    Accepted Solution

    It's nothing to do with your code. The scrollbar on your page is about 260px deep. The image that is used to display the scrollbar (attached) is only 174px deep, so the image doesn't fill the space of the scrollbar, leaving you with a gap. You need to edit the image so it's the right size.

    Scollbar Image

    Author Closing Comment


    Featured Post

    IT, Stop Being Called Into Every Meeting

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    Join & Write a Comment

    When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
    Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
    In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
    HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

    746 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now